闭包陷阱是 React 开发中非常常见且容易忽视的问题，尤其在结合 Hooks（如 useEffect、useCallback）和异步操作时。它的本质是函数捕获了过期的状态或 props，导致行为不符合预期。
什么是闭包陷阱
在 JavaScript 中，函数会记住它被创建时的作用域环境，这就是闭包。React 每次渲染都会重新执行组件函数，生成新的作用域和新的 props/state 值。当一个函数（例如事件处理器、useEffect 中的回调、定时器、异步请求等）引用了某个状态值，但该函数没有被最新的渲染更新，它就仍然持有旧值，造成“看到的不是最新值”的问题。
典型场景 1：useEffect 中的过期状态
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
// 这里的 count 永远指向组件首次渲染时的值（0）
console.log('当前 count:', count);
setCount(count + 1);
}, 1000);
return () => clearInterval(timer);
}, []); // 空依赖，effect 只在首次渲染执行
}你期望每隔一秒 count 加 1，但实际上 count 始终是 0，控制台一直打印 当前 count: 0，UI 也只会从 0 变为 1 然后停止。这是因为 setInterval 回调在第一次渲染时被创建，它捕获的 count 始终是初始值 0。
解决方案
方案一：使用函数式更新（推荐）
当状态更新不依赖外部闭包变量时，直接使用 setState(prev => prev + 1)，这样就能拿到最新的状态，不需要依赖闭包中的值。
setInterval(() => {
setCount(prev => prev + 1);
}, 1000);方案二：添加正确的依赖项
每次 count 变化时重新设置定时器：
useEffect(() => {
const timer = setInterval(() => {
console.log('当前 count:', count);
setCount(count + 1);
}, 1000);
return () => clearInterval(timer);
}, [count]);但这样会导致定时器频繁重建，性能不佳。因此对于这种场景，函数式更新是最佳选择。
典型场景 2：异步请求中的过期 props
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
useEffect(() => {
fetchUser(userId).then(data => {
// 当请求完成时，userId 可能已经变化，但 data 是旧 userId 的结果
setUser(data);
});
}, [userId]);
}如果 userId 变化很快，前一个请求响应时才设置状态，但此时 userId 已经变了，页面会短暂显示旧数据。虽然 useEffect 会在 userId 变化时重新请求，但异步完成顺序不确定，可能导致不一致。
解决方案：使用标志位清除过期的副作用
useEffect(() => {
let cancelled = false;
fetchUser(userId).then(data => {
if (!cancelled) {
setUser(data);
}
});
return () => {
cancelled = true;
};
}, [userId]);useEffect 的清理函数会在下一次 effect 执行前运行，通过标志位让过期请求的结果被丢弃。也可以使用 AbortController 真正取消请求。
典型场景 3：useCallback 与过期闭包
function Parent() {
const [count, setCount] = useState(0);
const handleClick = useCallback(() => {
console.log(count); // 点击时打印的 count 可能是旧值
}, []); // 依赖为空，回调只创建一次
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>增加</button>
<Child onClick={handleClick} />
</div>
);
}点击 Child 组件时，打印的 count 总是第一个渲染时的值，因为 handleClick 从未更新。
解决方案：在依赖数组中添加 count 或使用 ref
- 添加依赖：
[count]，这样每次 count 变化都会创建新函数，但可能导致子组件不必要的重渲染（除非配合React.memo）。 - 使用
useRef保存最新值，保持回调引用不变：
const countRef = useRef(count);
countRef.current = count;
const handleClick = useCallback(() => {
console.log(countRef.current); // 始终获取最新值
}, []);典型场景 4：useEffect 中事件监听器的过期闭包
function App() {
const [message, setMessage] = useState('初始值');
useEffect(() => {
const handleResize = () => {
console.log(message); // 监听器始终打印挂载时的 message
};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []); // 只在挂载时绑定
}窗口尺寸变化时，message 永远是挂载时的值。
解决方案：在依赖数组中添加 message
useEffect(() => {
// ...
}, [message]);这样每次 message 变化都会重新绑定新的事件处理器。如果绑定/解绑代价很小，这种方式简单有效。或者同样可以使用 ref 保持监听器不变而获取最新 message。
闭包陷阱的根源与核心思考
React 的渲染模型是“每次渲染都有独立的 props 和 state”，这是刻意设计，以防止副作用导致不一致。但副作用（异步）打破了这种同步模型，产生了时间差。当函数（回调）的生命周期跨越多次渲染时，它捕获的值仍是创建时的那次渲染的快照。
记住两条核心修复原则：
- 依赖数组中忠实列出所有被函数引用的、来自渲染作用域的变量（遵守
exhaustive-deps规则）。 - 当你想让函数保持引用不变却又需要最新值时，用
useRef作为“逃生舱口”——但不要滥用，多数情况直接添加依赖是更清晰的做法。
理解闭包陷阱的本质，是深入掌握 React Hooks 工作原理的关键一步。大多数“莫名其妙”的状态不同步问题，几乎都能在闭包上找到答案。