React Hooks 闭包陷阱：为什么 useState 拿不到最新值？

你在写 React 组件时，是否遇到过这样的诡异 Bug：

scss 复制代码

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

useEffect(() => {
    const timer = setInterval(() => {
        console.log(count); // 永远是 0，不会递增
    }, 1000);
    
    return () => clearInterval(timer);
}, []);

你明明调用了 setCount，但定时器里的 count 永远停留在初始值 0。这不是 React 的 Bug，而是 JavaScript 闭包陷阱（Closure Trap） 。

今天，我们从 V8 引擎的执行上下文机制出发，深度剖析 Hooks 闭包陷阱的本质，并给出工业界的解决方案。

1. 闭包陷阱的本质：快照 vs 引用

1.1 JavaScript 的闭包机制

闭包（Closure）是 JavaScript 的核心特性之一。当一个函数引用了其外部作用域的变量时，就形成了闭包。

javascript 复制代码

function createCounter() {
    let count = 0;
    
    return function() {
        return count++;
    };
}

const counter = createCounter();
console.log(counter()); // 0
console.log(counter()); // 1

关键点 ：闭包捕获的是变量的引用，而不是值。只要外部变量更新，闭包内部的访问也会更新。

1.2 React 的渲染机制

但 React 的函数组件每次渲染都是全新的函数调用：

scss 复制代码

function Counter() {
    const [count, setCount] = useState(0);
    
    // 每次渲染，这个函数都会重新执行
    // count 是一个全新的局部变量
    console.log(count);
    
    return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

问题所在：

useEffect 在第一次渲染时执行，捕获了当时的 count（值为 0）
后续渲染时，虽然 count 变成了 1、2、3，但 useEffect 内部的闭包仍然引用着第一次渲染时的 count

这就是闭包陷阱：你以为拿到的最新值，其实是旧渲染周期的"快照"。

2. 深度剖析：React Fiber 架构下的 Hooks 实现

要彻底理解闭包陷阱，需要深入到 React Fiber 的底层实现。

2.1 Hooks 的状态存储

React 使用单向链表来存储 Hooks 状态：

javascript 复制代码

// React 内部简化版实现
let workInProgressHook = null;

function useState(initialState) {
    // 从链表中获取当前 Hook
    const hook = workInProgressHook;
    
    // 返回 [currentState, dispatch]
    return [hook.memoizedState, dispatchAction.bind(null, hook)];
}

关键机制：

memoizedState 存储当前值
每次渲染时，React 会遍历这个链表，按顺序调用每个 Hook
如果依赖数组为空（[]），Effect 只在第一次渲染时执行，闭包永远捕获初始值

2.2 执行上下文切换

ini 复制代码

// 简化版渲染流程
function renderComponent(Component) {
    // 重置 Hooks 链表
    workInProgressHook = component.memoizedState;
    
    // 执行组件函数
    const result = Component();
    
    // 保存新的 Hooks 状态
    component.memoizedState = workInProgressHook;
}

每次渲染都是独立的执行上下文，闭包捕获的就是那个时刻的上下文快照。

3. 工业界解决方案

3.1 方案一：useRef（引用不变性）

scss 复制代码

const countRef = useRef(0);

useEffect(() => {
    const timer = setInterval(() => {
        console.log(countRef.current); // 始终是最新值
    }, 1000);
    
    return () => clearInterval(timer);
}, []); // 空依赖数组

// 更新时
countRef.current = count;

原理：useRef 返回一个可变引用对象 ，它的 .current 属性在整个组件生命周期内保持不变，闭包捕获的是引用本身，而不是值。

3.2 方案二：函数式更新

scss 复制代码

useEffect(() => {
    const timer = setInterval(() => {
        setCount(prev => prev + 1); // 函数式更新
    }, 1000);
    
    return () => clearInterval(timer);
}, []);

原理：setCount(prev => prev + 1) 不依赖外部闭包，React 内部会自动传入最新状态。

3.3 方案三：useCallback + 依赖数组

scss 复制代码

const tick = useCallback(() => {
    console.log(count);
}, [count]); // 将 count 加入依赖

useEffect(() => {
    const timer = setInterval(tick, 1000);
    return () => clearInterval(timer);
}, [tick]);

原理：当 count 变化时，tick 函数会重新创建，Effect 也会重新执行，闭包捕获最新值。

缺点：定时器会被频繁清除和重建，性能开销较大。

4. 高阶技巧：自定义 Hook 封装

工业界通常会封装一个 useInterval Hook：

scss 复制代码

function useInterval(callback, delay) {
    const savedCallback = useRef();
    
    // 保存最新回调
    useEffect(() => {
        savedCallback.current = callback;
    });
    
    // 设置定时器
    useEffect(() => {
        function tick() {
            savedCallback.current();
        }
        
        if (delay !== null) {
            const id = setInterval(tick, delay);
            return () => clearInterval(id);
        }
    }, [delay]);
}

// 使用
useInterval(() => {
    console.log(count); // 永远是最新值
}, 1000);

优势：

闭包捕获的是 savedCallback 引用（不变）
savedCallback.current 始终指向最新回调
定时器不会频繁重建

5. Vue Composition API 的对比

Vue 3 的 Composition API 采用响应式系统，不存在闭包陷阱：

javascript 复制代码

import { ref } from 'vue';

const count = ref(0);

setInterval(() => {
    console.log(count.value); // 始终是最新值
}, 1000);

原理差异：

Vue 使用 Proxy 或 Object.defineProperty 实现响应式
访问 count.value 时触发 getter，自动追踪依赖
不需要手动管理依赖数组

6. 面试考点

Q1: 为什么 useEffect 的依赖数组为空时会出现闭包陷阱？

A: 空依赖数组导致 Effect 只在挂载时执行一次，闭包捕获的是第一次渲染时的变量快照，后续渲染不会更新闭包。

Q2: useRef 为什么能解决闭包陷阱？

A: useRef 返回的对象引用在组件生命周期内保持不变，闭包捕获的是引用本身。通过修改 .current 属性，可以在闭包内部访问到最新值。

Q3: React 为什么不自动更新闭包？

A: 这是设计取舍。自动更新闭包会导致每次状态变化都重新创建 Effect，性能开销巨大。React 选择让开发者显式声明依赖，提供更大的控制权。

7. 总结

闭包陷阱不是 React 的缺陷，而是 JavaScript 词法作用域 + React 函数式渲染 的必然结果。

理解它的本质：

函数组件每次渲染都是全新的执行上下文
闭包捕获的是创建时的变量快照
React Hooks 依赖链表管理状态

解决方案的核心思想：

用 useRef 保持引用不变
用函数式更新绕过闭包
用依赖数组显式声明变化

下次遇到闭包陷阱，别再怀疑人生了，这是 JavaScript 的基本功！

如果你觉得这篇关于"React 底层原理"的文章对你有帮助，欢迎点赞收藏！🚀