react笔记之useCallback/useEffect闭包陷阱

这是一个 React 开发中非常经典又容易踩坑的问题："闭包陷阱"（Stale Closure） 。我们来用通俗易懂的方式解释它，并说明为什么 漏掉 useCallback 或 useEffect 的依赖会导致这个问题。

---

🧠 什么是"闭包陷阱"（Stale Closure）？

在 JavaScript 中，函数会"记住"它被创建时所在的作用域中的变量------这就是闭包。

在 React 函数组件中，每次渲染都会执行整个函数体 ，生成一组新的变量和函数。如果某个函数（比如事件处理函数或 effect 回调）捕获了旧渲染周期中的变量值 ，而没有随着状态更新而更新，就会出现"看到的是过期数据"的问题------这就是 stale closure（陈旧闭包）。

---

🔍 举个典型例子

function Counter() {
  const [count, setCount] = useState(0);

  // ❌ 漏掉依赖的 useEffect
  useEffect(() => {
    const id = setInterval(() => {
      console.log('Count:', count); // 总是打印 0！
    }, 1000);
    return () => clearInterval(id);
  }, []); // ← 依赖数组为空，漏掉了 count！

  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}

💥 发生了什么？

• 组件首次渲染时，count = 0。
• useEffect 被调用（因为依赖是 []，只运行一次）。
• setInterval 的回调函数闭包捕获了第一次渲染时的 count（值为 0）。
• 即使你点击按钮让 count 变成 1、2、3......
  → setInterval 里的 count 仍然是 0 ！因为它引用的是旧作用域中的变量。

这就是 stale closure：函数"困在了过去"，看不到最新的状态。

---

🔄 如果正确添加依赖呢？

useEffect(() => {
  const id = setInterval(() => {
    console.log('Count:', count);
  }, 1000);
  return () => clearInterval(id);
}, [count]); // ✅ 正确依赖

但这样也有问题：每次 count 变化都会重新创建定时器，可能不是你想要的。

更好的做法是使用 函数式更新 或 ref 来访问最新值（后面会讲）。

---

🎯 再看 useCallback 的 stale closure 例子

function Parent() {
  const [name, setName] = useState("Alice");

  // ❌ 漏掉 name 依赖
  const greet = useCallback(() => {
    alert(`Hello, ${name}!`); // 总是 "Hello, Alice!"
  }, []); // ← 没有 name！

  return (
    <>
      <input value={name} onChange={e => setName(e.target.value)} />
      <Child onGreet={greet} />
    </>
  );
}

const Child = React.memo(({ onGreet }) => {
  return <button onClick={onGreet}>Greet</button>;
});

💥 问题：

• greet 函数在首次渲染时创建，捕获了 name = "Alice"。
• 即使你在输入框改成 "Bob"，点击按钮仍然弹出 "Hello, Alice!"。
• 因为 useCallback 的依赖是 []，函数永远不会更新！

这就是 useCallback 漏依赖导致的 stale closure。

---

✅ 正确做法：补全依赖

const greet = useCallback(() => {
  alert(`Hello, ${name}!`);
}, [name]); // ✅ 现在 name 变化时，greet 会重新创建

这样，当 name 改变，greet 函数引用也会更新，子组件（如果是 React.memo）会收到新函数，点击时就能看到最新名字。

---

⚠️ 但注意：依赖也不能乱加！

React 官方强调：依赖数组必须包含回调中用到的所有响应式值（state、props、其他 hooks 返回值等）。

如果你用了 ESLint 的 react-hooks/exhaustive-deps 规则，它会自动警告你漏掉依赖。

---

🔧 如何避免 stale closure？总结

方法	说明
✅ 补全依赖	在 useCallback、useEffect、useMemo 中完整列出所有用到的响应式变量
✅ 使用函数式更新	如 setCount(c => c + 1)，避免依赖旧值
✅ 用 ref 同步最新值	对于像 setInterval 这种长期存在的回调，可用 ref 存最新 state： const countRef = useRef(count); useEffect(() => { countRef.current = count; }, [count]);
✅ 开启 ESLint 规则	强制检查依赖完整性

---

🧩 高级技巧：用 useRef 解决定时器 stale closure

function Counter() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);

  // 同步 ref
  useEffect(() => {
    countRef.current = count;
  }, [count]);

  useEffect(() => {
    const id = setInterval(() => {
      console.log('Current count:', countRef.current); // 总是最新的！
    }, 1000);
    return () => clearInterval(id);
  }, []); // ✅ 依赖为空也没问题

  return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
}

---

✅ 总结

"漏掉依赖 → stale closure" 的本质是：函数闭包锁定了旧渲染周期中的变量值，无法感知后续的状态更新。

• useCallback、useEffect、useMemo 都受此影响。
• 永远不要手动"省略"依赖，除非你明确知道自己在做什么（比如用 ref 替代）。
• 让 ESLint 帮你检查，是避免这类 bug 的最佳实践。