欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 房产 > 家装 > 【react】useEffect 快速上手

【react】useEffect 快速上手

2025/5/20 3:42:21 来源:https://blog.csdn.net/qq_37268201/article/details/139457181  浏览:    关键词:【react】useEffect 快速上手

useEffect 快速上手

useEffect(setup, dependencies?) 可以接收两个参数,分别是回调函数与依赖数组.
useEffect 用什么姿势来调用,本质上取决于你想用它来达成什么样的效果。下面我们来简单介绍 useEffect 的调用规则。

每一次渲染后都执行的副作用:传入回调函数,不传依赖数组。调用形式如下所示:

useEffect(setup);

仅在挂载阶段执行一次的副作用:传入回调函数,且这个函数的返回值不是一个函数,同时传入一个空数组。调用形式如下所示:

useEffect(()=>{// 这里是业务逻辑 
}, [])

仅在挂载阶段和卸载阶段执行的副作用:传入回调函数,且这个函数的返回值是一个函数,同时传入一个空数组。假如回调函数本身记为 A, 返回的函数记为 B,那么将在挂载阶段执行 A,卸载阶段执行 B。调用形式如下所示:

useEffect(()=>{// 这里是 A 的业务逻辑// 返回一个函数记为 Breturn ()=>{}
}, [])

注意,这种调用方式之所以会在卸载阶段去触发 B 函数的逻辑,是由 useEffect 的执行规则决定的:useEffect 回调中返回的函数被称为“清除函数”,当 React 识别到清除函数时,会在调用新的 effect 逻辑之前执行清除函数内部的逻辑。这个规律不会受第二个参数或者其他因素的影响,只要你在 useEffect 回调中返回了一个函数,它就会被作为清除函数来处理。

每一次渲染都触发,且卸载阶段也会被触发的副作用:传入回调函数,且这个函数的返回值是一个函数,同时不传第二个参数。如下所示:

useEffect(()=>{// 这里是 A 的业务逻辑// 返回一个函数记为 Breturn ()=>{}
})

上面这段代码就会使得 React 在每一次渲染都去触发 A 逻辑,并且在下一次 A 逻辑被触发之前去触发 B 逻辑。

如果有一段 effect 逻辑,需要在每次调用它之前对上一次的 effect 进行清理,那么把对应的清理逻辑写进 useEffect 回调的返回函数(上面示例中的 B 函数)里就行了。

根据一定的依赖条件来触发的副作用:传入回调函数,同时传入一个非空的数组,如下所示:

useEffect(()=>{// 这是回调函数的业务逻辑 // 若 xxx 是一个函数,则 xxx 会在组件每次因 num1、num2、num3 的改变而重新渲染时被触发return xxx
}, [num1, num2, num3])

这里一个示意数组是 [num1, num2, num3]。数组中的变量一般都是来源于组件本身的数据(props 或者 state)。若数组不为空,那么 React 就会在新的一次渲染后去对比前后两次的渲染,查看数组内是否有变量发生了更新(只要有一个数组元素变了,就会被认为更新发生了),并在有更新的前提下去触发 useEffect 中定义的副作用逻辑。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词