如何配置useEffect使其仅在所有依赖项均变更时触发？

嘿，这个需求React内置的useEffect确实没法直接满足——毕竟它的默认逻辑就是只要有一个依赖变就触发回调。不过我们可以手动追踪依赖的变化来搞定，思路其实很清晰：

核心逻辑 #

我们需要自己记录上一次的依赖状态，每次触发useEffect时（也就是任意依赖变化时），对比当前所有依赖和上一次的是否全部不一样，只有满足这个条件时，才执行我们真正要跑的业务逻辑，最后再更新记录的依赖状态。

具体实现步骤 #

1. 用useRef存储上一次的依赖值：useRef的.current属性不会触发组件重渲染，非常适合存这种用于追踪的状态。
2. 在useEffect中监听所有需要关注的依赖：这里还是要把所有依赖放进依赖数组，这样才能在任意依赖变化时进入回调做判断。
3. 对比当前依赖与上一次的依赖：
   • 第一次渲染时prevDepsRef.current是undefined，你可以选择是否执行逻辑（根据业务需求决定）
   • 非首次渲染时，检查每一个依赖项是否都和上一次的不同
4. 仅当所有依赖都变化时，执行目标逻辑，然后更新prevDepsRef.current为当前依赖数组。

代码示例 #

假设我们有两个依赖depA和depB，要等它们都变化才触发逻辑：

import { useEffect, useRef } from 'react';

function MyComponent({ depA, depB }) {
  // 存储上一次的依赖数组
  const prevDepsRef = useRef();

  useEffect(() => {
    const currentDeps = [depA, depB];

    // 首次渲染时可以选择不执行（如果需要首次执行，去掉这个if判断即可）
    if (prevDepsRef.current) {
      // 检查所有依赖是否都发生了变化
      const allDepsChanged = prevDepsRef.current.every((prevDep, idx) => {
        return prevDep !== currentDeps[idx];
      });

      if (allDepsChanged) {
        // 这里写你要执行的业务逻辑
        console.log('所有依赖都更新了，触发目标操作！');
        // 比如发起请求、更新状态等
      }
    }

    // 不管有没有执行逻辑，都更新上一次的依赖记录
    prevDepsRef.current = currentDeps;
  }, [depA, depB]); // 监听所有依赖，确保任意变化都能进入回调

  return <div>My Component</div>;
}

注意事项 #

• 如果你的依赖是引用类型（比如对象、数组），直接用!==对比会有问题——因为即使内容没变，引用地址变了也会被认为是变化。这时候需要用深对比，比如自己实现一个深比较函数，或者用lodash.isEqual：

  import isEqual from 'lodash/isEqual';
  
  // 把对比逻辑改成深比较
  const allDepsChanged = prevDepsRef.current.every((prevDep, idx) => {
    return !isEqual(prevDep, currentDeps[idx]);
  });
  

• 如果需要首次渲染就执行一次逻辑，只需要去掉if (prevDepsRef.current)这个判断，或者在外面加个分支处理首次渲染的情况。

内容的提问来源于stack exchange，提问作者Jack