React 闭包陷阱怎么解决？

Question

React 闭包陷阱怎么解决？

仓乃文 · Accepted Answer

函数组件每次渲染都是独立的闭包，事件回调或 useEffect 中引用的 state 永远是创建那次渲染的值，而不是最新值，这就是闭包陷阱。解决方式取决于场景：定时器/事件回调用 useRef，setState 用函数式更新，Effect 依赖不齐就补齐依赖数组。

useRef 方案（定时器/事件回调中读最新值）：
```javascript
function Counter() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  useEffect(() => { countRef.current = count; }); // 每次渲染同步最新值
  const handleAlert = () => {
    setTimeout(() => {
      alert(countRef.current); // 始终拿到最新值
    }, 3000);
  };
}
```

函数式更新方案（setState 中读最新值）：
```javascript
// 闭包陷阱：count 拿到的是旧值
setCount(count + 1);
// 函数式更新：prev 是最新值
setCount(prev => prev + 1);
```

补充说明：
- 闭包陷阱的本质是每次渲染产生独立的闭包，函数捕获的是定义时的 state 快照
- useRef 返回的对象在组件生命周期内引用不变，.current 可随时读写最新值
- 函数式更新 setCount(prev => prev + 1) 中 prev 始终是最新状态，不需要 ref
- useEffect 依赖数组缺失导致的闭包陷阱，根本解法是补齐依赖