相信玩 React hooks的你，肯定也遇到过那种莫名其妙的“闭包陷阱”。

说实话，这玩意儿kan着hen酷，实际一不小心就会掉进坑里。

我这边先给你抛个砖，后面再慢慢捡回来。

先别急，闭包其实就是函数把外面的变量“带回家”。

这听起来挺好懂，结果在 React 里它会把每一次渲染的状态快照dou塞进回调里。

于是你写的那个 setTimeoutsetInterval甚至自定义 Hook，dou可Neng拿到“老旧”的值。

举个Zui经典的计数器例子：

function Counter {
  const  = useState;
  const showAlert =  => {
    setTimeout => {
      alert;
    }, 2000);
  };
  return (
    

      
点击次数：{count}
       setCount}>+1
      弹窗
    
  );
}

点了几下 +1，再立刻点弹窗，等两秒后弹出来的往往不是Zui新的 count。

原因hen简单：alert 的回调在第一次渲染时就捕获了当时的 count，后面 state 改了它根本不知道。

1️⃣ 用函数式geng新避免依赖闭包：

setCount;

这样内部会把Zui新的 state 当作参数传进去，不用管外面的快照。

2️⃣ 用 useRef 把Zui新值塞进去：

const countRef = useRef;
useEffect => {
  countRef.current = count;
}, );
const showAlert =  => {
  setTimeout => {
    alert;
  }, 2000);
};

ref 不会随渲染重新创建，随时Neng拿到Zui新值。

3️⃣ 正确写依赖数组：

useEffect => {
  const id = setInterval => {
    console.log;
  }, 1000);
  return  => clearInterval;
}, ); // 别忘记加 count

不加的话，每次 effect dou只会跑一次后面的状态根本不geng新。

- 把 Hook 放在 if/for 循环里。咱说真的，这会打乱内部链表顺序，让 React 完全找不到对应的 state。

- 用普通变量保存状态，然后在异步回调里读。结果总是旧值。

- 忘记给 useCallback 加上完整依赖。kan似省事，实际却让回调持有旧闭包。

自定义 Hook 常常把逻辑封装得hen漂亮，却也容易把闭包问题藏得geng深。

function usePolling {
  const savedCb = useRef;
  useEffect => {
    savedCb.current = callback;
  }, );
  useEffect => {
    if  return;
    const id = setInterval => savedCb.current, interval);
    return  => clearInterval;
  }, );
}

这里用了两个 effect，一个负责同步Zui新 callback，一个负责启动定时器。这样即使 callback 改变了也不会导致定时器重新创建，同时还Neng保证每次执行的是Zui新函数。

A: “为什么百度不收录？” 哈哈，这其实跟我们写技术博客的时候经常忽视的一点有关——内容缺乏独特性和结构化信息。

B: 百度爬虫geng喜欢有明确标题层级、合理关键词密度、以及可读性好的段落。要是全是代码块或者没有足够自然语言描述，就容易被判定为低价值页面从而不收录。

function CounterWithFix {
  const  = useState;
  // 使用 ref 保存Zui新值
  const latestCount = useRef;
  useEffect => {
    latestCount.current = count;
  }, );
  // 使用 ref 的安全 alert
  const showAlert =  => {
    setTimeout => {
      alert;
    }, 2000);
  };
  // 用函数式geng新避免闭包
  const increment =  => setCount;
  return (
    

      
点击次数：{count}
      +1
      弹窗
    
  );
}

Ehh，你可NengYi经发现hen多组件里的 , ,

C: 真正解决办法不是让依赖列表无限增长，而是拆分职责，用自定义 Hook 把副作用抽离出来让每个 effect 的关注点单一且明确。