首页 > 其他分享> 文章详细

useEffect

2022-03-08 15:02:53 阅读：163 来源： 互联网

标签：useEffect 函数依赖数组执行 todos

useEffect 让我们能够在下面四种时机去执行一个回调函数产生副作用：

1.每次 render 后执行：不提供第二个依赖项参数。比如useEffect(() => {})。

2.仅第一次 render 后执行：提供一个空数组作为依赖项。比如useEffect(() => {}, [])。

3.第一次以及依赖项发生变化后执行：提供依赖项数组。比如useEffect(() => {}, [deps])。

4.组件 unmount 后执行：返回一个回调函数。比如useEffect() => { return () => {} }, [])。

那么在定义依赖项时，我们需要注意以下三点：

1.依赖项中定义的变量一定是会在回调函数中用到的，否则声明依赖项其实是没有意义的。

2.依赖项一般是一个常量数组，而不是一个变量。因为一般在创建 callback 的时候，你其实非常清楚其中要用到哪些依赖项了。

3.React 会使用浅比较来对比依赖项是否发生了变化，所以要特别注意数组或者对象类型。如果你是每次创建一个新对象，即使和之前的值是等价的，也会被认为是依赖项发生了变化。这是一个刚开始使用 Hooks 时很容易导致 Bug 的地方。

bug示例：

function Sample() {
  // 这里在每次组件执行时创建了一个新数组
  const todos = [{ text: 'Learn hooks.'}];
  useEffect(() => {
    console.log('Todos changed.');
  }, [todos]);
}

代码的原意可能是在 todos 变化的时候去产生一些副作用，但是这里的 todos 变量是在函数内创建的，实际上每次都产生了一个新数组。所以在作为依赖项的时候进行引用的比较，实际上被认为是发生了变化的。

标签：useEffect,函数,依赖,数组,执行,todos
来源： https://www.cnblogs.com/gdluck/p/15980441.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

useEffect