useEffect中的deps数组经常依赖了好多变量，甚至包括对象，如何避免这样，假如某个变量变化了，就会执行useEffct里的方法

避免在useEffect的依赖数组中包含大量变量或对象，可以通过以下几种策略来优化：

拆分useEffect：如果不同的副作用依赖于不同的状态或变量，可以将它们拆分为多个useEffect调用。这样每个useEffect只关注自己关心的依赖项，使逻辑更加清晰且易于维护。
```
useEffect(() => {
  // 仅当a变化时执行
  console.log("Effect based on 'a'");
}, [a]);

useEffect(() => {
  // 仅当b变化时执行
  console.log("Effect based on 'b'");
}, [b]);
```

使用引用（useRef）来存储不会引起重新渲染的值：对于一些计算结果或状态，如果它们的改变不应触发副作用的执行，可以使用useRef来存储。这样，即使其内容改变，也不会导致依赖数组的变化。

const someComputedValue = useRef(computeValue(a, b));
useEffect(() => {
  // 当需要使用someComputedValue时，访问.some
  console.log(someComputedValue.current);
}, [a, b]); // 注意这里仍然需要列出可能影响计算过程的变量

深比较对象或数组：当依赖数组中包含对象或数组时，React默认使用浅比较，这意味着只要对象或数组的引用改变，就会触发useEffect。
如果对象内容变化但引用不变，可以使用自定义的深比较函数或库（如lodash的_.isEqual）来判断是否真的需要更新依赖。
但请注意，这种方法较为繁琐，且可能引入额外的性能开销。
```
import isEqual from 'lodash/isEqual';

const prevProps = useRef({});
useEffect(() => {
  if (!isEqual(prevProps.current, props)) {
    // 对象内容有变化时执行
    console.log("Props have changed");
    prevProps.current = props; // 更新引用，以供下次比较
  }
}, [props]);
```
使用自定义Hook封装复杂逻辑：如果依赖项管理变得非常复杂，可以考虑抽象出一个自定义Hook，将依赖项管理和副作用逻辑封装起来，使得调用处更加简洁明了。

通过上述策略，可以有效减少useEffect依赖数组的复杂度，提高代码的可读性和性能。

__EOF__

本文作者：龙陌
本文链接：https://www.cnblogs.com/longmo666/p/18168330.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！