PorterYuan · 个人学习博客

闭包陷阱深度剖析

8分钟阅读

闭包陷阱深度剖析

一、闭包陷阱深度剖析

1.1 根因——从 Fiber 层看闭包陷阱

每次渲染，组件函数都重新执行一遍。useState 返回的值来自 Hook 节点的 memoizedState，但组件函数体里的普通变量（包括解构的 state、props）是”这次渲染的快照”。

useEffect 的回调被创建时，闭包捕获的是那次渲染的所有变量快照。如果依赖数组是 []——这个回调只属于第一次渲染。

 
渲染 #1（count = 0）：
 
  Fiber 上 Hook①.memoizedState = 0
 
  组件函数执行 → count 解构成 0 → 创建 effect 对象：
 
    { create: () => { console.log(count) },  ← 闭包捕获 count = 0
 
      deps: [] }
 
  useEffect 执行 → 启动定时器，定时器里跑 create → 永远打印 0
 
渲染 #2（count = 1）：
 
  Fiber 上 Hook①.memoizedState = 1
 
  组件函数执行 → count 解构成 1 → 创建新 effect 对象：
 
    { create: () => { console.log(count) },  ← 新闭包捕获 count = 1
 
      deps: [] }
 
  但 deps 是 [] → React 比较：上次 [] vs 这次 [] → Object.is → 没变 → 不执行新 create
 
  ✅ Fiber 上 effect.deps 还是 []
 
  ❌ 定时器里跑的仍是渲染 #1 的 create——它闭包里的 count 永远是 0

一句话：闭包陷阱的根因不是”闭包有 bug”，而是 [] 依赖让 React 只执行了第一次渲染的 effect.create，而那次 create 闭包里捕获的变量是第一次渲染的快照。后面的渲染更新了 Fiber 上的 state，但效果回调没重建——它还在用第一次的快照。

1.2 三种解法的原理（从 Fiber 角度看）

方案Fiber 视角的原理一句话
加依赖 [count]count 变了 → deps 变了 → React 执行旧 destroy + 新 create → 新 create 捕获的是本次渲染的最新 count”每次 state 变就重建 effect，新闭包自然拿到新值”
函数式更新 prev => prev + 1回调里不读闭包中的 count——读的是 React 调用时传的 prev 参数。prev 来自 Fiber 上的 memoizedState，永远是实时的”不读闭包——React 直接传最新值进来”
useRefref 对象 { current } 在多次渲染间是同一个 JS 对象（引用不变）。回调里读 ref.current 读的是同一个对象的属性——拿到别人（渲染时）更新进去的最新值”同一个便签纸——你在上面写，我在下面读，闭包无所谓”
 
方案 1：加依赖
 
  渲染 #1：deps=[0]，执行 create₁（闭包 count=0）
 
  渲染 #2：deps=[1] ≠ [0] → 执行 destroy₁ + create₂（闭包 count=1）
 
  ✅ 每次 count 变，create 是新的 → 闭包里是最新 count
 
方案 2：函数式更新
 
  渲染 #1：create₁ 里写的是 setCount(prev => prev + 1)，不读闭包的 count
 
  渲染 #2：deps 没变 → create₁ 继续跑 → 但回调里 prev 是 React 传给它的最新 Fiber.memoizedState
 
  ✅ 不靠闭包传值 → 绕过闭包陷阱
 
方案 3：useRef
 
  渲染 #1：ref = { current: 0 }，create₁ 闭包捕获的是 ref 对象（不是 ref.current 的值）
 
  渲染 #2：ref.current = 1（在渲染中更新），但 ref 对象还是同一个
 
          → create₁ 里读 ref.current → 读到刚更新的 1
 
  ✅ 闭包捕获的是"便签本"（ref 对象），不是"便签上写的内容"（ref.current 的值）

1.3 完整话术（1 分钟版）

延伸提问：“useEffect 里的闭包陷阱是什么？怎么解决？“

 
"闭包陷阱的本质是——useEffect 回调被创建时，闭包捕获了那次渲染的 props 和 state。
 
如果依赖数组写 []，这个回调只属于第一次渲染，之后的渲染虽然 state 更新了，
 
但回调里读到的永远是第一次渲染的旧值。
 
解决方案三种：
 
1. 把变量加进依赖数组——变量变化时 React 会执行 cleanup + 重新 setup，新回调自然拿到新值
 
2. 用函数式 state 更新 setState(prev => prev + 1)——prev 是 React 传的，不依赖闭包
 
3. 用 useRef 存最新值——ref 对象跨渲染不变，改 .current 不触发渲染，但回调能读到最新值
 
定时器场景推荐方案 2（不反复清定时器），复杂场景（WebSocket）用方案 3。"

速记卡（面试闪卡）

Q1：一句话讲清「闭包陷阱深度剖析」到底是什么？

A：React 闭包陷阱指 useEffect 依赖写 [] 时，回调只捕获首次渲染的变量快照，后续更新读到的永远是旧值。

Q2：1.1 根因——从 Fiber 层看闭包陷阱 —— 怎么理解？

A：根因像”旧照片”：每次渲染组件重跑，useState 值来自 Fiber 的 memoizedState，但普通变量是这次快照；[] 依赖让回调永远用第一张照片（Fiber 纤维节点）。

Q3：1.2 三种解法的原理（从 Fiber 角度看） —— 怎么理解？

A：三解法像三把钥匙：加依赖让 React 重建回调拿新值；函数式更新读 React 传的 prev；useRef 用同一个便签本跨渲染（useRef 引用）。

Q4：1.3 完整话术（1 分钟版） —— 怎么理解？

A：面试话术三步：先说根因（回调捕获首次快照），再讲三解法（加依赖/函数式更新/useRef），最后点场景——定时器用函数式、WebSocket 用 useRef（closure trap 闭包陷阱）。

Q5：闭包陷阱面试速记三解法 —— 怎么理解？

A：记三招：① 加依赖数组，变量变就重建 effect；② 函数式 setState(prev=>prev+1) 不读闭包；③ useRef 存最新值跨渲染可读（stale closure 陈旧闭包）。

Q6：核心速记主线有哪些？

  • 根因：[] 依赖使 effect 回调只属首次渲染，闭包捕获的是首次快照

  • 解法1：把变量加进依赖数组，变化即重建 effect 拿新值

  • 解法2：函数式更新 setState(prev=>prev+1)，不读闭包

  • 解法3：useRef 存最新值，对象跨渲染不变，回调读到最新

口诀

A：闭包陷阱根因旧，[] 依赖只首次；

加依赖重建回调，新值自然进来；

函数式更新不读闭，React 传 prev 真；

useRef 同本跨渲染，便签写上即时读。

相关链接

关系图谱

反向链接

近期更新