🔍 什么是闭包陷阱
在 React 函数组件开发中，闭包陷阱是一个非常经典且常见的问题。要理解闭包陷阱，我们首先需要理解闭包的形成条件。
闭包的形成条件
闭包的形成通常出现在以下场景：
- 函数组件嵌套了定时器、事件处理函数等
- 使用
useEffect且依赖数组为空 - 使用
useCallback缓存函数 - 词法作用域链的作用
让我们看一个典型的闭包陷阱示例：
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
console.log('Current count:', count);
}, 1000);
return () => {
clearInterval(timer);
}
}, []);
}
在这个例子中，useEffect 的依赖数组是空的，这意味着它只会在组件挂载时执行一次。setInterval 回调函数中引用了 count 变量，由于闭包的特性，这个回调函数会捕获到初始渲染时的 count 值（也就是 0）。即使后续我们通过 setCount 更新了 count 的值，定时器回调中的 count 仍然会保持初始值 0，这就是闭包陷阱！
💡 深入理解 React 的渲染机制
要彻底明白闭包陷阱，我们需要理解 React 函数组件的渲染机制：
React 函数组件的重新渲染
每次组件重新渲染时：
- 函数组件会重新执行
useState返回的状态值是当前最新的值- 所有在组件内部定义的函数、变量都会被重新创建
useEffect会根据依赖数组决定是否重新执行
闭包的工作原理
闭包是 JavaScript 中的一个核心概念，指的是函数能够记住并访问其词法作用域，即使该函数在其词法作用域之外执行。
在 React 中，每次渲染都会创建一个新的"快照"，包含当时的所有状态、props 和函数。当 useEffect 依赖数组为空时，它只在第一次渲染时执行，因此它捕获的是第一次渲染时的闭包，里面的所有变量都是初始值。
🛠️ 解决闭包陷阱的 12 种方案
方案一：将依赖项加入到依赖数组中【推荐】
这是最简单也是最推荐的解决方案。通过将 count 加入到依赖数组中，每当 count 变化时，useEffect 都会重新执行，从而捕获到最新的 count 值。
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
console.log('Current count:', count);
}, 1000);
return () => {
clearInterval(timer);
}
}, [count]);
}
重要提示：不只是组件卸载时才会执行清理函数，每次 effect 重新执行之前，都会先执行上一次的清理函数。这样可以确保不会有多个定时器同时运行。
方案二：使用 useRef 引用变量
useRef 返回的对象在组件的整个生命周期中保持不变，我们可以用它来存储最新的状态值。
function App() {
const [count, setCount] = useState(0);
const countRef = useRef(count);
countRef.current = count;
useEffect(() => {
const timer = setInterval(() => {
console.log('Current count:', countRef.current);
}, 1000);
return () => {
clearInterval(timer);
}
}, []);
}
这种方法的优势是 useEffect 不需要重新执行，避免了频繁创建和清理定时器的开销。
方案三：使用 useCallback 缓存函数
useCallback 可以缓存函数，结合 useRef 一起使用：
function App() {
const [count, setCount] = useState(0);
const countRef = useRef(count);
countRef.current = count;
const logCount = useCallback(() => {
console.log('Current count:', countRef.current);
}, []);
useEffect(() => {
const timer = setInterval(() => {
logCount();
}, 1000);
return () => {
clearInterval(timer);
}
}, []);
}
方案四：使用 useLayoutEffect 代替 useEffect
useLayoutEffect 在 DOM 更新后同步执行，虽然它不能直接解决闭包问题，但在某些场景下配合其他方法使用会更合适：
function App() {
const [count, setCount] = useState(0);
const countRef = useRef(count);
countRef.current = count;
const logCount = useCallback(() => {
console.log('Current count:', countRef.current);
}, []);
useLayoutEffect(() => {
const timer = setInterval(() => {
logCount();
}, 1000);
return () => {
clearInterval(timer);
}
}, []);
}
方案五：使用 useMemo 缓存变量
useMemo 用于缓存计算结果，同样可以配合 useRef 使用：
function App() {
const [count, setCount] = useState(0);
const countRef = useRef(count);
countRef.current = count;
const logCount = useCallback(() => {
console.log('Current count:', countRef.current);
}, []);
useLayoutEffect(() => {
const timer = setInterval(() => {
logCount();
}, 1000);
return () => {
clearInterval(timer);
}
}, []);
}
方案六：使用 useReducer 管理状态
useReducer 是另一种状态管理方式，它的 dispatch 函数具有稳定的引用，可以避免闭包问题：
function App() {
const [count, setCount] = useReducer((state, action) => {
switch (action.type) {
case 'increment':
return state + 1;
case 'decrement':
return state - 1;
default:
return state;
}
}, 0);
const countRef = useRef(count);
countRef.current = count;
const logCount = useCallback(() => {
console.log('Current count:', countRef.current);
}, []);
useLayoutEffect(() => {
const timer = setInterval(() => {
logCount();
}, 1000);
return () => {
clearInterval(timer);
}
}, []);
}
方案七：使用 useImperativeHandle 暴露方法
useImperativeHandle 用于自定义暴露给父组件的 ref 实例值：
function App() {
const [count, setCount] = useState(0);
const countRef = useRef(count);
countRef.current = count;
const logCount = useCallback(() => {
console.log('Current count:', countRef.current);
}, []);
useLayoutEffect(() => {
const timer = setInterval(() => {
logCount();
}, 1000);
return () => {
clearInterval(timer);
}
}, []);
}
方案八：使用 useContext 传递状态
useContext 可以跨组件传递状态，避免 prop drilling：
function App() {
const [count, setCount] = useState(0);
const countRef = useRef(count);
countRef.current = count;
const logCount = useCallback(() => {
console.log('Current count:', countRef.current);
}, []);
useLayoutEffect(() => {
const timer = setInterval(() => {
logCount();
}, 1000);
return () => {
clearInterval(timer);
}
}, []);
}
方案九：使用 useDebugValue 调试状态
useDebugValue 用于在 React DevTools 中显示自定义 Hook 的标签：
function App() {
const [count, setCount] = useState(0);
const countRef = useRef(count);
countRef.current = count;
const logCount = useCallback(() => {
console.log('Current count:', countRef.current);
}, []);
useLayoutEffect(() => {
const timer = setInterval(() => {
logCount();
}, 1000);
return () => {
clearInterval(timer);
}
}, []);
}
方案十：使用 useTransition 处理异步更新
useTransition 是 React 18 引入的 Hook，用于标记非紧急更新：
function App() {
const [count, setCount] = useState(0);
const countRef = useRef(count);
countRef.current = count;
const logCount = useCallback(() => {
console.log('Current count:', countRef.current);
}, []);
useLayoutEffect(() => {
const timer = setInterval(() => {
logCount();
}, 1000);
return () => {
clearInterval(timer);
}
}, []);
}
方案十一：使用 useDeferredValue 处理异步更新
useDeferredValue 也是 React 18 引入的 Hook，用于延迟更新某些值：
function App() {
const [count, setCount] = useState(0);
const countRef = useRef(count);
countRef.current = count;
const logCount = useCallback(() => {
console.log('Current count:', countRef.current);
}, []);
useLayoutEffect(() => {
const timer = setInterval(() => {
logCount();
}, 1000);
return () => {
clearInterval(timer);
}
}, []);
}
方案十二：使用 useLayoutEffect 处理同步更新
useLayoutEffect 在 DOM 更新后同步执行，可以用于处理需要立即反映到 DOM 上的操作：
function App() {
const [count, setCount] = useState(0);
const countRef = useRef(count);
countRef.current = count;
const logCount = useCallback(() => {
console.log('Current count:', countRef.current);
}, []);
useLayoutEffect(() => {
const timer = setInterval(() => {
logCount();
}, 1000);
return () => {
clearInterval(timer);
}
}, []);
}
📝 实际应用场景
闭包陷阱不仅仅出现在定时器中，还可能出现在以下场景：
- 事件处理函数：在
useEffect中添加事件监听器 - 异步请求：在
useEffect中发起网络请求 - 动画：使用
requestAnimationFrame等 API - WebSocket：建立长连接
- 防抖节流函数：在组件中使用防抖或节流
🎓 最佳实践建议
- 优先使用依赖数组：这是最直观、最符合 React 设计理念的方案
- 合理使用 useRef：当不需要频繁重新执行 effect 时，useRef 是很好的选择
- 理解清理函数的重要性：始终正确清理定时器、事件监听器等资源
- 使用 ESLint 插件：
eslint-plugin-react-hooks可以帮助你发现遗漏的依赖项
希望这篇文章能帮助你彻底理解 React 闭包陷阱！🎉
