React 中，闭包陷阱

---

前言

在 React 中，闭包陷阱常出现在 Hooks 和异步操作中，表现为捕获过期变量值。以下是常见场景及解决方案：

---

1. 经典闭包陷阱示例

过期状态问题

function Counter() {const [count, setCount] = useState(0);useEffect(() => {const timer = setInterval(() => {// 闭包捕获初始化时的 count=0console.log(count); // 永远输出 0}, 1000);return () => clearInterval(timer);}, []); // 空依赖数组return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
}

• 原因：useEffect 的闭包捕获了初始渲染时的 count，依赖数组为空导致不会更新闭包。

---

2. 解决方案

2.1 正确声明依赖数组

useEffect(() => {const timer = setInterval(() => {console.log(count); // 每次渲染捕获最新 count}, 1000);return () => clearInterval(timer);
}, [count]); // 依赖数组声明 count

• 代价：每次 count 变化都会重新创建定时器。

---

2.2 使用 useRef 捕获最新值

function Counter() {const [count, setCount] = useState(0);const latestCount = useRef(count);useEffect(() => {latestCount.current = count; // 实时更新 ref});useEffect(() => {const timer = setInterval(() => {console.log(latestCount.current); // 始终读取最新值}, 1000);return () => clearInterval(timer);}, []); // 无需依赖 countreturn <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
}

• 原理：useRef 的 .current 属性是可变容器，可穿透闭包捕获最新值。

---

2.3 使用函数式更新（针对状态更新）

const [count, setCount] = useState(0);// 在异步操作中使用函数式更新
useEffect(() => {const timer = setInterval(() => {setCount(c => c + 1); // 直接基于最新状态更新}, 1000);return () => clearInterval(timer);
}, []);

• 优势：setCount(c => c + 1) 直接访问最新状态，避免闭包陷阱。

---

2.4 使用 useCallback 冻结闭包

const [count, setCount] = useState(0);const handleClick = useCallback(() => {// 若依赖数组为空，此闭包永远捕获 count=0console.log(count);
}, [count]); // 依赖数组声明 count// 或使用函数式更新避免依赖
const stableHandler = useCallback(() => {setCount(c => c + 1); // 不依赖 count
}, []);

• 关键：通过依赖数组控制闭包重新创建时机，或使用函数式更新解耦依赖。

---

3. 异步操作中的闭包陷阱

事件监听示例

function App() {const [text, setText] = useState('');useEffect(() => {const handleClick = () => {console.log(text); // 闭包捕获初始空字符串};document.addEventListener('click', handleClick);return () => document.removeEventListener('click', handleClick);}, []); // 空依赖导致闭包不更新return <input onChange={e => setText(e.target.value)} />;
}

• 修复方案：使用 useRef 或声明依赖：

  const latestText = useRef(text);
  useEffect(() => { latestText.current = text; }, [text]);useEffect(() => {const handleClick = () => {console.log(latestText.current); // 读取最新值};document.addEventListener('click', handleClick);return () => document.removeEventListener('click', handleClick);
  }, []); // 依赖保持为空
  

---

4. 自定义 Hooks 中的闭包管理

返回稳定函数

function useCounter() {const [count, setCount] = useState(0);const increment = useCallback(() => {setCount(c => c + 1); // 使用函数式更新}, []);return { count, increment }; // increment 是稳定的
}

• 优势：父组件无需担心 increment 的闭包问题。

---

总结：避免闭包陷阱的核心原则

1. 依赖数组：在 useEffect、useCallback、useMemo 中显式声明所有依赖。
2. 可变引用：用 useRef 存储需要跨渲染周期保持最新的值。
3. 函数式更新：在状态更新时使用 setState(c => c + 1) 直接访问最新值。
4. 冻结闭包：通过 useCallback 控制函数的重新创建，避免不必要的闭包变化。

理解这些机制后，可大幅减少因闭包导致的 React 应用 Bug。