React · 主观题 · 第 48 题
前端与全栈开发面试 · 第 48 题
什么是 React Hooks 中的「过期闭包」问题?请举例并给出解决办法。
参考答案
1. 现象:每次渲染,函数组件都会重新执行,回调捕获的是那一次渲染时的 props 和 state。如果某个回调被长期持有,它看到的就一直是旧值。
2. 例子:useEffect(() => { const id = setInterval(() => setCount(count + 1), 1000); return () => clearInterval(id); }, []); 依赖为空,定时器里的 count 永远是 0,所以页面上始终显示 1。
3. 解决一:使用函数式更新 setCount(c => c + 1),不依赖闭包里的旧值。
4. 解决二:如实声明依赖 [count],代价是每次 count 变化都会重新创建定时器。
5. 解决三:用 useRef 保存最新值,回调里读取 ref.current;也可以用 useEffectEvent(React 19.2 起成为稳定 API)把「读最新值」的逻辑从副作用中分离出来。
6. 用 eslint-plugin-react-hooks 的 exhaustive-deps 规则检查依赖,可以提前发现这类问题。
解析
举出定时器的例子并给出函数式更新、依赖、ref 三种解法即可。