React 中如何正确使用 useEffect 的依赖数组以避免闭包陷阱？

React 中如何正确使用 useEffect 的依赖数组以避免闭包陷阱？

回答与解析：

在 React 中，useEffect 的依赖数组用于控制 effect 的重新执行时机。如果依赖项缺失或不准确，可能导致“闭包陷阱”——即 effect 中引用的变量是过时的旧值。

正确做法：

1. 始终将 effect 中用到的所有外部变量（包括 props、state、函数等）加入依赖数组。React 官方 ESLint 插件（eslint-plugin-react-hooks）会自动检查并提示缺失的依赖。

2. 对于函数依赖，若该函数在组件内定义，应配合 useCallback 缓存，避免无限循环或不必要的重渲染。

3. 如需访问最新状态但又不想频繁触发 effect，可使用 useRef 保存最新值，并在 effect 中读取 ref.current。

示例：

function Timer() {
  const [count, setCount] = useState(0);
  const latestCount = useRef(count);

  // 同步 ref 到最新 state
  useEffect(() => {
    latestCount.current = count;
  }, [count]);

  useEffect(() => {
    const id = setInterval(() => {
      // 使用 ref 避免闭包捕获旧 count
      console.log('Current count:', latestCount.current);
    }, 1000);
    return () => clearInterval(id);
  }, []); // 仅挂载时运行一次

  return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
}

总结：
闭包陷阱本质是 JavaScript 闭包机制与 React 渲染周期结合的副作用。正确管理依赖数组、合理使用 useRef 或 useCallback，是避免此类问题的关键。始终遵循“依赖完整”原则，并借助 ESLint 工具辅助检查。