别让 useEffect 和 setInterval 联手把你困在过去的时空里！
今天，咱们就来聊聊一个看似简单、实则暗藏玄机的话题——React 中的闭包陷阱（Closure Trap） 。
如果你曾写过 useEffect + setInterval 的组合，然后发现定时器里打印的 count 永远是初始值……恭喜你，你已经掉进了 React 闭包的温柔陷阱！别慌，这篇文章不仅会告诉你“为什么”，还会教你“怎么破”，顺便加点段子让你笑着学会它 😎
🧠 闭包？不就是函数记住变量吗？
没错！闭包的本质是：内层函数可以访问外层函数的变量，并且即使外层函数执行完了，这些变量也不会被销毁。
在 React 函数组件中，每次渲染都会执行整个函数体。而像 useEffect、useCallback 这些 Hook，内部如果引用了状态（比如 count），就会形成一个词法作用域快照——也就是“那一刻”的 count 值。
这听起来很酷，对吧？但问题来了：
当这个“快照”被长期持有（比如放进 setInterval），它就变成了一个“时间胶囊”——永远停留在过去，再也追不上现在。
🕰️ 案例重现：那个永远不变的 count
来看这段经典代码（你肯定写过类似）：
useEffect(() => {
const timer = setInterval(() => {
console.log('Current count:', count); // 总是 0？
}, 1000);
return () => clearInterval(timer);
}, []); // 注意：依赖数组为空！
你点击按钮让 count 从 0 → 1 → 2 → 3……
但控制台却倔强地输出：
Current count: 0
Current count: 0
Current count: 0
...
Why？
因为 useEffect 只在组件首次挂载时运行一次。此时 count 是 0，setInterval 的回调函数捕获了这个 0，形成了闭包。之后无论 count 怎么变，这个回调里的 count 依然是当初那个“青涩的 0”。
就像你给前任发消息：“你还好吗？”
其实你心里知道，对方早就 move on 了，但你的记忆还停在分手那天。
🔁 那我把依赖加上不就行了？
聪明！于是你改成：
useEffect(() => {
const timer = setInterval(() => {
console.log('Current count:', count);
}, 1000);
return () => clearInterval(timer);
}, [count]); // 加上 count 依赖
现在，每次 count 变化，useEffect 都会重新执行：
→ 清掉旧定时器 → 启动新定时器 → 打印最新 count。
看起来完美？但等等——每秒都在创建和销毁定时器！性能开销不说，逻辑也变得奇怪：你本意是“启动一个长期运行的定时器”，结果变成了“每变一次就重启一次”。
而且，如果定时器里有复杂逻辑（比如轮询 API），频繁重建可能导致竞态或重复请求。
这就像你为了看一眼手机有没有新消息，每秒钟换一部新手机……
不是不行，就是有点费钱（和 CPU）。
💡 真正的解法：用 useRef 或函数式更新
✅ 方案一：用 useRef 存最新值
const countRef = useRef(count);
useEffect(() => {
countRef.current = count; // 每次 count 更新，同步到 ref
}, [count]);
useEffect(() => {
const timer = setInterval(() => {
console.log('Current count:', countRef.current); // 拿最新的！
}, 1000);
return () => clearInterval(timer);
}, []);
ref 是可变的，且不会触发重渲染。它就像一个“共享的白板”，所有闭包都能看到上面的最新内容。
✅ 方案二：使用函数式 setState（适用于 setter）
如果你只是想在定时器里更新状态，而不是读取，可以用：
useEffect(() => {
const timer = setInterval(() => {
setCount(prev => {
console.log('Now it is:', prev + 1);
return prev + 1;
});
}, 1000);
return () => clearInterval(timer);
}, []);
setCount(prev => ...) 能拿到当前最新状态，绕过闭包限制。
✅ 方案三：终极懒人法 —— 用自定义 Hook
社区已有成熟方案，比如 useInterval：
function useInterval(callback, delay) {
const savedCallback = useRef();
useEffect(() => { savedCallback.current = callback; }, [callback]);
useEffect(() => {
const tick = () => savedCallback.current();
if (delay !== null) {
const id = setInterval(tick, delay);
return () => clearInterval(id);
}
}, [delay]);
}
// 使用
useInterval(() => {
console.log('Current count:', count);
}, 1000);
这样既保持了定时器稳定，又能访问最新 count（因为 callback 每次渲染都会更新到 ref 中）。
🤔 闭包是陷阱？还是特性？
其实，闭包不是 bug，而是 React 的设计哲学。
React 希望你在每次渲染时都得到一个“纯净的快照”：UI、事件处理、副作用都基于当前这次渲染的状态。这保证了逻辑的一致性和可预测性。
问题不在于闭包，而在于我们误以为闭包能自动“感知”状态变化。
React 不是魔法，它只是 JavaScript。
而 JavaScript 的闭包，从来就不会自动更新变量值。
🎯 总结：避坑指南
| 场景 | 问题 | 解法 |
|---|---|---|
useEffect([], () => { setInterval(() => {读取 state }) }) | 闭包捕获初始值 | 用 useRef 同步最新值 |
| 频繁重建定时器 | 性能差、逻辑混乱 | 用 useRef 或 useInterval |
| 想在定时器中更新状态 | 无法获取最新状态 | 用函数式更新 setState(prev => ...) |
❤️ 最后送你一句 React 真言：
“状态是瞬时的，闭包是永恒的。若想穿越时空，请用 ref 当虫洞。”
希望这篇文章能帮你跳出闭包陷阱，写出更健壮的 React 代码。如果你也曾被这个问题折磨过，欢迎在评论区留下你的“血泪史” 😂
P.S. 别忘了：React 的世界里，没有“最新状态”，只有“当前渲染的状态”。拥抱它，理解它，你就能成为 Hooks 大师！✨
