在使用 React 的 useEffect 时，为什么有时候依赖数组为空（[]）会导致闭包陷阱（stale closure）问题？

在使用 React 的 useEffect 时，为什么有时候依赖数组为空（[]）会导致闭包陷阱（stale closure）问题？

回答与解析：

当 useEffect 的依赖数组为空（[]）时，该 effect 仅在组件首次挂载时执行一次。此时 effect 内部捕获的变量（如 state 或 props）会形成闭包，其值被“冻结”在 effect 创建时的状态。如果这些变量后续发生变化，effect 内部无法感知到最新值，从而导致 stale closure（陈旧闭包）问题。

示例：

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      console.log('Current count:', count); // 始终输出 0
    }, 1000);
    return () => clearInterval(timer);
  }, []); // 依赖数组为空

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

在这个例子中，尽管 count 会随着点击增加，但 setInterval 回调中打印的 count 始终是初始值 0，因为闭包捕获的是首次渲染时的 count。

解决方法：

1. 正确声明依赖：将 count 加入依赖数组，但注意这会导致每次 count 变化时重新创建定时器。

   useEffect(() => {
     const timer = setInterval(() => {
       console.log('Current count:', count);
     }, 1000);
     return () => clearInterval(timer);
   }, [count]); // 但频繁重建可能非预期
   

2. 使用函数式更新或 ref 同步最新值：

   const countRef = useRef(count);
   useEffect(() => {
     countRef.current = count;
   }, [count]);
   
   useEffect(() => {
     const timer = setInterval(() => {
       console.log('Current count:', countRef.current);
     }, 1000);
     return () => clearInterval(timer);
   }, []);
   

3. 使用 useReducer 或自定义 hook 管理复杂副作用逻辑。

核心原则：确保 effect 中使用的响应式变量（state/props）都正确列入依赖数组，或通过 ref 等机制访问最新值，避免闭包陷阱。