React Hooks 的依赖数组（deps）工作原理与优化策略

1. 依赖数组的作用

React Hooks（如 useEffect、useMemo、useCallback）的依赖数组（deps）用于声明钩子的依赖关系，决定钩子是否需要重新执行。其核心逻辑是：

• 每次组件渲染时，React 会使用 Object.is 对比当前依赖项与上一次的依赖项。
• 如果所有依赖项的值均未变化，则跳过钩子的执行（如 useEffect 的副作用函数）。
• 如果任意依赖项变化，则重新执行钩子。

2. 依赖数组的底层对比机制

以 useEffect 为例，其伪代码逻辑如下：

let prevDeps = null; // 上一次的依赖数组

function useEffect(callback, deps) {
  const hasNoDeps = !deps; // 无依赖数组时，每次渲染都执行
  const hasChanged = prevDeps ? 
    !deps.every((dep, i) => Object.is(dep, prevDeps[i])) : true;
  
  if (hasNoDeps || hasChanged) {
    callback(); // 执行副作用
    prevDeps = deps; // 更新依赖缓存
  }
}

关键点：

• 使用 Object.is 对比每个依赖项（类似 ===，但能正确处理 NaN 和 ±0）。
• 依赖项数量变化（如从 [a] 变为 [a, b]）会被判定为变化。

3. 依赖数组的常见问题与优化

问题1：依赖项不完整导致状态滞后

function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    // 缺少 count 依赖，setInterval 中 count 始终为初始值 0
    const id = setInterval(() => setCount(count + 1), 1000);
    return () => clearInterval(id);
  }, []); // ❌ 错误：依赖项为空
}

修复方案：

1. 添加完整依赖（但会导致定时器重复创建）：

   useEffect(() => { ... }, [count]);
   

2. 使用函数式更新避免依赖 count：

   useEffect(() => {
     const id = setInterval(() => setCount(c => c + 1), 1000);
     return () => clearInterval(id);
   }, []); // ✅ 依赖项为空
   

问题2：依赖项为引用类型导致不必要的重执行

function App() {
  const config = { type: 'interval' }; // 每次渲染重新创建
  
  useEffect(() => {
    console.log('Config changed'); // 每次渲染都会执行
  }, [config]); // ❌ config 每次都是新对象
}

优化策略：

1. 使用 useMemo 缓存引用类型：

   const config = useMemo(() => ({ type: 'interval' }), []);
   

2. 使用 useCallback 缓存函数：

   const onClick = useCallback(() => { ... }, []);
   

4. 依赖数组的极端情况处理

无限循环陷阱

const [data, setData] = useState(null);
useEffect(() => {
  fetchData().then(setData); // setData 导致重新渲染，再次触发 useEffect
}, [data]); // ❌ data 变化后再次执行，形成循环

解决：确保依赖项仅包含必要变量，或使用条件判断阻断循环。

空依赖数组的语义

• useEffect(fn, []) 仅在挂载时执行，模拟 componentDidMount。
• 但若 fn 内部使用了 props/state，需通过 ref 或 Reducer 获取最新值。

5. 总结：依赖数组的设计哲学

1. 声明式依赖：明确告知 React 钩子的输入变化条件，避免隐式依赖。
2. 性能优化：通过依赖对比减少不必要的计算或副作用。
3. 心智模型简化：依赖数组规则统一（所有 Hook 共用一套机制），降低学习成本。

通过合理使用依赖数组，可平衡代码的简洁性、正确性与性能。