嘿，老铁们，今天咱们聊一聊 React 的闭包定时器到底怎么搞的总是不准，别说我在敲代码时头疼了。

记得我第一次用 Hook 写一个倒计时的时候，按钮点了几下控制台却一直打印 0。你想啊，那怎么可Neng？

我当时就愣住了“这算什么？”“这就是闭包陷阱的典型表现！”于是我开始挖掘背后的原理。

闭包简单说就是函数和它“捕获”的变量集合。JavaScript 的函数Ke以访问它外层作用域里的变量，即使外层Yi经执行完毕。

React 函数组件每一次渲染dou相当于创建一个全新的作用域。也就是说当你在 useEffect 中写了一个定时器，它会抓住那一次渲染时的变量值，然后后面再渲染geng新也不会影响到它。

import { useState, useEffect } from 'react';
function Demo {
  const  = useState;
  // 第一次渲染后才跑
  useEffect => {
    const id = setInterval => {
      console.log;
    }, 1000);
    return  => clearInterval;
  }, ); // 注意：这里没有把 count 放进去
  return (
    
count: {count}
     setCount}>+
  );
}

运行起来你会kan到页面上数值递增，但控制台永远输出 'Current count:' ，就像闹钟没走一样。

在上面这段代码里setInterval 创建的回调函数在第一次渲染的时候就被定义。此时的 count 是 0。以后每次你点击按钮， 会变成 1、2、3…可那段回调还是“记得”Zui初的 0，因为它并不知道后面发生了变化。

"那怎么办？"

"要么把 count 放进依赖数组，让 effect 每次dou重新创建定时器；要么用geng聪明的方法让回调Neng拿到Zui新值。”

useEffect => {
  const id = setInterval => {
    console.log;
  }, 1000);
  return  => clearInterval;
}, ); // 每次 count 改变dou会重新跑

这样ZuoKe以保证每秒打印的是Zui新值。不过有个隐患——每次计数变化dou要销毁旧定时器，新建一个，这在高频率geng新里会hen卡。

"对啊！而且还有个geng酷的方法，就是不用重建定时器，用 ref 保存Zui新值。" 那时候我想起了这个小技巧：

const latestCount = useRef;
useEffect => {
   latestCount.current = count;
}, );
useEffect => {
   const id = setInterval => {
     console.log;
   },1000);
   return  => clearInterval;
}, ); // 空依赖，只跑一次

"这样就Neng让回调拿到Zui新的状态啦！"

"因为我们绕过了 React 的响应式模型，Ru果你手动改 latestCount.current 那也Neng导致 UI 和日志不同步。" 要慎用。 第二招：函数式geng新避免闭包问题

useEffect => {
   const id = setInterval => {
     setCount; // 用函数式geng新，让 React 内部拿Zui新值
   },1000);
   return  => clearInterval;
}, ); 

"这样Zuo既Neng保证计数正确，又不用担心闭包。" 实际上这是Zui常见的解决方式。

"Ru果你需要geng精准的计时setTimeout / setInterval 会被浏览器抖动甚至被后台标签节流。" 所以推荐用 requestAnimationFrame Zuo帧同步：

let rafId;
const tick =  => {
   // do something
   rafId = requestAnimationFrame;
};
rafId = requestAnimationFrame;
// 清除：
cancelAnimationFrame;

"或者Ru果你的逻辑hen耗费 CPU，就把它搬到 Web Worker 那儿去，让主线程腾出来玩 UI 吧！"

* 定时器Zui好放在 useEffect 返回的清理函数里一旦组件卸载就及时 cancel.

* Ru果你用的是 window.setTimeout 一直跑，也要记得在 unmount 时 clearTimeout.

* 对于多级嵌套组件，要确保子组件也清理自己的资源，否则内存泄漏可就真成灾难啦。

"说实话，我Zui近发现自己写的一篇技术博文竟然被百度搜索不到，你们知道为什么吗？" 我回答：“原因往往不是内容差，而是元数据、robots.txt 或者关键词布局搞错。” 大家可别忽略这些细节哦！"

* 闭包捕获旧值导致定时器读不到Zui新状态。

* 用依赖数组重建或用 ref+函数式geng新dou是常见修复方案。

* 对性Neng敏感场景，Ke以考虑 requestAnimationFrame 或 Web Worker。

* 永远别忘记清理定时器和副作用，否则老铁们会给你捡垃圾。

* Zui后一句话——技术路上，总有坑要爬，但只要你懂原理，就Neng轻松过关。