React 闭包陷阱：从现象到原理，一篇搞懂

在 React 函数组件中，闭包陷阱是一个既常见又容易让人困惑的问题。本文将通过一个简单的计数器示例，逐行剖析闭包陷阱的产生原因、实际影响，并给出多种解决方案，帮助你彻底理解并避免它。

一、引子：一个"不正常"的计数器

我们先来看一段 React 代码：

import { useState, useEffect } from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      console.log('Current count:', count);
    }, 1000);
    return () => clearInterval(timer);
  }, []); // 注意：依赖数组为空

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

你期望的效果是：每隔一秒打印当前的 count 值，并且当你点击按钮增加 count 时，控制台打印的值也会随之更新。

但实际运行后你会发现：无论点击多少次按钮，控制台打印的一直是 初始值 0 。这就是经典的 React 闭包陷阱。

二、逐行解剖：代码到底发生了什么？

import { useState, useEffect } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  console.log(count, '----------------------');   // ①

  useEffect(() => {
    const timer = setInterval(() => {             // ②
      console.log('Current count:', count);       // ③
    }, 1000);

    return () => clearInterval(timer);            // ④
  }, [count])                                     // ⑤

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

① console.log(count, '----------------------')

• 每次组件渲染时都会执行这一行，打印当前的 count 值。
• 你可以从控制台看到：每次点击按钮，count 增加，这一行也会打印新的值。这证明组件确实在重新渲染，而且 count 状态已经更新。

② const timer = setInterval(...)

• useEffect 的回调函数中创建了一个定时器，每隔 1 秒执行一次内部的箭头函数。

③ console.log('Current count:', count)

• 定时器的回调函数访问了外部变量 count。
• 由于 JavaScript 的词法作用域 ，这个回调函数会"记住"它被创建时所在作用域中的 count 值。
• 关键点：这个回调函数是一个闭包 ，它捕获了 count 变量的值（注意：捕获的是变量本身 还是值？后面细说）。

④ return () => clearInterval(timer)

• useEffect 的清理函数，在组件卸载或下次 effect 执行前被调用，用来清除上一个定时器，防止内存泄漏。

⑤ }, [count])

• 依赖数组包含 count。这意味着：每当 count 变化时，effect 会重新运行 。
  流程如下：
  1. 第一次渲染：count = 0，创建定时器，其回调捕获了 count = 0。
  2. 点击按钮，count 变为 1，触发重新渲染。
  3. 渲染完成后，useEffect 检查依赖 [count] 发现变化，于是先执行上一次的清理函数（清除旧的定时器），再执行新的 effect：重新创建一个定时器，其回调捕获的是新的 count = 1。
  4. 依次类推，每次 count 变化都会重建定时器。

结果 ：控制台打印的值会随着 count 更新而更新，一切正常。
但问题来了 ：如果依赖数组是空 []（如注释掉的版本），就不会重建定时器，闭包永远捕获初始的 count = 0，于是出现了"闭包陷阱"。

为什么很多人一开始会写 []

useEffect(() => {
  const timer = setInterval(() => {
    console.log('Current count:', count);
  }, 1000);
  return () => clearInterval(timer);
}, [])  // 空依赖

• 因为依赖为空，该 effect 只在组件挂载时执行一次。
• 定时器回调函数在挂载时被创建，它捕获了当时作用域中的 count 值（即 0）。
• 之后即使 count 通过 setCount 更新，组件重新渲染，但定时器回调仍然是原来那个闭包 ，它引用的 count 依然是旧值（0）。
• 所以控制台永远打印 0 ------ 闭包陷阱诞生。

三、什么是 React 闭包？它从何而来？

1. JavaScript 闭包回顾

闭包的定义：一个函数能够"记住"并访问它的词法作用域，即使该函数在其词法作用域之外执行。

简单示例：

function outer() {
  let message = 'Hello';
  function inner() {
    console.log(message);
  }
  return inner;
}
const fn = outer();
fn(); // 仍然能打印 'Hello'

2. React 中的闭包

React 函数组件每次渲染时，都会重新执行整个函数体，创建一个新的"渲染闭包"。每个渲染都有自己独立的 props 和 state 的快照。

• 在同一个渲染中 ：所有函数（事件处理、useEffect 回调、定时器回调等）都会捕获本次渲染的状态值。
• 当状态更新，触发下一次渲染 ：新的渲染闭包产生了全新的状态值，但旧渲染闭包里的函数依然引用着旧的状态。

这就是为什么空依赖的 useEffect 里的定时器永远只能看到第一次渲染的 count ------ 它属于第一次渲染的闭包。

3. 闭包陷阱的影响

• 数据过期 ：异步操作（如 setTimeout、setInterval、事件监听、Promise.then）中访问的状态不是最新的。
• 无限循环：错误地在依赖数组中省略必要依赖，却在该 effect 中修改状态，可能导致死循环。
• 性能问题：为了解决闭包陷阱而过度添加依赖，导致 effect 频繁重建（如定时器被反复清除和创建）。

四、如何避免闭包陷阱？

下面介绍几种常见且有效的方案。

方案一：正确设置依赖（适合大多数场景）

对于 setInterval 场景，如果依赖变化后重建不会造成副作用，直接加依赖是最简单的：

useEffect(() => {
  const timer = setInterval(() => {
    console.log(count);
  }, 1000);
  return () => clearInterval(timer);
}, [count]); // ✅ 依赖 count

但缺点：count 频繁变化时，定时器会频繁被销毁和重建。

方案二：使用 useRef 保持最新值

ref 是一个可变对象，它的 .current 属性始终指向最新值，而且不会触发重新渲染。我们可以结合 useEffect 和 useRef 来解决：

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

// 每次渲染后同步 ref 的值
useEffect(() => {
  countRef.current = count;
}, [count]);

useEffect(() => {
  const timer = setInterval(() => {
    console.log('Current count:', countRef.current); // 通过 ref 获取最新值
  }, 1000);
  return () => clearInterval(timer);
}, []); // 依赖为空，定时器只创建一次

原理 ：定时器闭包捕获的是 countRef 这个对象引用，而对象的 .current 属性始终被更新为最新的 count，所以总能拿到最新值。

方案三：使用 useReducer 或 useState 的函数式更新

当需要在闭包中基于最新状态更新状态时，可以使用函数式更新：

setCount(prev => prev + 1); // prev 总是最新值

但这对读取状态（而非更新）没有帮助，因为读取仍然需要最新值。

方案四：使用 useCallback 配合正确的依赖

如果你将函数作为 props 传递给子组件，且该函数内部依赖了状态，请使用 useCallback 包裹并正确声明依赖，避免子组件中形成过期的闭包。

const handleClick = useCallback(() => {
  console.log(count);
}, [count]);

方案五：使用 useEvent（React 18 实验性 Hook）或第三方库

React 官方正在讨论引入 useEvent，它返回一个稳定的函数引用，但内部总能访问到最新的 props/state。目前可以借助 ahooks 的 useMemoizedFn 等库。

五、深入思考：为什么 React 不自动解决闭包陷阱？

React 的设计哲学是可预测性 和显式性 。闭包的行为本质上是 JavaScript 的特性，如果 React "偷偷"修改闭包捕获的变量，会破坏开发者对 JS 的心智模型。因此 React 选择通过 依赖数组 让开发者明确声明 effect 依赖哪些外部变量，从而控制闭包的生命周期。

六、总结与最佳实践

场景	推荐方案
Effect 中使用状态，且希望状态变化后 effect 重新执行	将状态加入依赖数组
Effect 中需要访问最新状态，但不想重建 effect（如长连接、定时器）	使用 useRef 存储最新值
传递给子组件的回调函数需要访问最新状态	使用 useCallback + 依赖，或 useRef + 函数式更新
复杂状态逻辑	考虑 useReducer，它天然避免了部分闭包问题（dispatch 稳定）

最后记住一句话：

在 React 中，每一次渲染都有它自己的状态、事件处理函数和 effect。闭包陷阱不是 bug，而是对 JavaScript 闭包机制的必然体现。理解它，才能驾驭它。