当前位置：首页 > news >正文

react 常见的闭包陷阱深入解析

news 2025/7/4 8:04:11

一、引子

先来看一段代码，你能说出这段代码的问题在哪吗？

const [count, setCount] = useState(0);
useEffect(() => {const timer = setTimeout(() => {setCount(count + 1);}, 1000);return () => clearTimeout(timer);
}, []);

正确答案：

这段代码存在闭包陷阱，会导致 setTimeout 中的回调函数捕获到的 count 值始终是初始值 0，最终定时器只会执行一次，count 永远停留在 1。

问题分析

依赖数组为空：
useEffect 的依赖数组为 []，意味着它只在组件挂载时执行一次。此时 count 的初始值为 0，被闭包捕获到 setTimeout 的回调函数中。
闭包导致的 stale 值：
当定时器触发时（1 秒后），回调函数使用的是捕获时的 count 值（即 0），而非最新值。因此每次执行 setCount(count + 1) 实际都是 setCount(0 + 1)，导致 count 永远为 1。
清除定时器的副作用：
虽然每次都会清除前一个定时器，但由于依赖数组为空，useEffect 不会重新执行，因此新的定时器不会被创建，后续更新被中断。

解决方案

使用函数式更新（推荐）

useEffect(() => {const timer = setTimeout(() => {setCount(prevCount => prevCount + 1); // 使用函数式更新获取最新值}, 1000);return () => clearTimeout(timer);
}, []); // 依赖数组仍为空，但不会受闭包影响

setCount(prev => prev + 1) 会从 React 的内部状态队列中获取最新值，而不是依赖闭包中的旧值。

添加 count 到依赖数组

useEffect(() => {const timer = setTimeout(() => {setCount(count + 1);}, 1000);return () => clearTimeout(timer); // 每次 count 变化时，清除旧定时器并创建新的
}, [count]); // 添加 count 到依赖数组，每次 count 变化时重新执行

这种方式会导致每秒钟创建一个新定时器（因为 count 每秒钟增加），虽然旧定时器会被清除，但可能影响性能。

使用 useRef 存储最新值

const countRef = useRef(0);
const [count, setCount] = useState(0);useEffect(() => {countRef.current = count; // 每次 count 变化时更新 ref
}, [count]);useEffect(() => {setTimeout(() => {const newCount = countRef.current + 1; // 获取最新值setCount(newCount);countRef.current = newCount;}, 1000);
}, []);

通过 ref 存储可变值，可以绕过闭包捕获。

二、闭包的 stale 值

在 React 中，闭包导致的 stale 值是一个常见的陷阱，它指的是在异步回调（如定时器、API 请求）中使用了过时的变量值。这是因为 JavaScript 的闭包会捕获变量的初始值，而非最新值。

闭包的概念

闭包对每一个前端开发来说都不陌生，它指有权访问另一个函数作用域中的变量的函数。即使该函数已经执行完毕，其作用域内的变量也会被闭包捕获并保留。

我们来看下面这个基础案例：

function outer() {let count = 0;function inner() {console.log(count); // 闭包捕获了 outer 函数作用域中的 count}count = 10; // 修改 count 的值return inner;
}const closure = outer();
closure(); // 输出 10（闭包捕获的是最终值）

再来对比一下这个定时器的案例：

function createClosure() {let value = 10; // 初始值setTimeout(function() {console.log(value); // 闭包捕获的是声明时的value值}, 1000);value = 20; // 修改value
}createClosure(); // 输出: 10（而非20）

闭包函数在声明时已经捕获了value的初始值（10），后续对value的修改不会影响闭包内保存的值。

React 中的 Stale 值问题

在 React 中，当使用 useEffect、setTimeout 等异步操作时，闭包可能会捕获到过时的状态值。正如我们文章开头引入的那个例子，现在明白了吧？

const [count, setCount] = useState(0);useEffect(() => {setTimeout(() => {console.log(count); // 闭包捕获的 count 始终是 0setCount(count + 1); // 每次都执行 setCount(0 + 1)}, 1000);
}, []); // 依赖数组为空，只执行一次

主要原因是 useEffect 只在组件挂载时执行一次，闭包捕获的 count 是首次渲染时的值，而非最新值。