前言
由于公司项目用的技术栈是React，个人对React还是熟悉一些，但只能算能够熟练使用吧。虽然也很想成为大佬（持续努力中.....）。最近想复习一下各个知识点，为了后续换工作做准备，每天更新一些文章，机会嘛总是留给有准备的人，既然技术能力有限，就得早做准备，提升自己。毕竟这两年大环境不咋地，建议能稳则稳。
React hooks闭包
React Hooks 的闭包陷阱是指在使用 React Hooks 时可能会遇到的一个常见问题，通常涉及到在回调函数或异步操作中使用 Hook 的状态。这可能导致一些预期之外的行为，因为闭包的作用域规则会导致 Hook 的值在某些情况下不会按照预期更新。
具体而言，这个问题通常出现在使用 useState、useEffect、useCallback 等 Hook 时，当 Hook 的值在回调函数或异步操作中被引用时，可能会出现闭包引用的旧值而不是最新值的情况。
以下是一个示例，说明了这个闭包陷阱：
import React, { useState, useEffect } from 'react';
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
const intervalId = setInterval(() => {
// 这里引用的 count 是闭包中的值，不一定是最新值
console.log('Current count:', count);
}, 1000);
return () => clearInterval(intervalId);
}, [count]);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
export default Counter;
在这个例子中，setInterval 回调中引用的 count 是闭包中的值，并不一定是最新的值。这可能导致在 setInterval 中的日志输出中看到旧的值。
为了解决这个问题，可以使用函数式更新的形式，确保在回调函数中使用的是最新值。修改上面的例子如下：
// ...
useEffect(() => {
const intervalId = setInterval(() => {
// 使用函数式更新确保在回调函数中使用的是最新值
setCount(prevCount => {
console.log('Current count:', prevCount);
return prevCount;
});
}, 1000);
return () => clearInterval(intervalId);
}, [count]);
// ...
通过使用函数式更新，确保在回调函数中使用的是最新值，从而避免了闭包陷阱带来的问题。
为什么会出现闭包
这种情况发生的根本原因是 JavaScript 中的闭包机制。在 JavaScript 中，函数会捕获其被创建时所处的作用域中的变量。在 React 组件中，当使用类似 useState 的 Hook 创建状态时，该状态是通过闭包来保存的。
让我们深入探讨为什么会发生这种情况：
- 「useState 的异步性：」 useState 是异步的。当你调用 setCount 时，React 不会立即更新状态，而是将更新加入到更新队列中。因此，在 setCount 被调用后，count 并不会立即改变。
- 「useEffect 的闭包：」 在 useEffect 中，当你引用 count 时，它会捕获在创建 useEffect 时的 count 值，而不是在 useEffect 执行时的最新值。因此，闭包中的 count 值可能是旧的。
- 「渲染周期和事件处理：」 在 React 中，事件处理函数和 useEffect 中的回调函数都是在渲染周期中创建的。因此，当事件处理函数或 useEffect 回调函数中引用了 count 时，它们会捕获在它们创建时的 count 值。
为了解决这个问题，React 提供了函数式更新的机制，通过传递一个函数给 setCount，该函数接收前一个状态，并返回新的状态值。这样确保在回调函数中使用的是最新的状态值，而不是闭包中的旧值。
setCount(prevCount => {
console.log('Current count:', prevCount);
return prevCount;
});
原文地址：https://mp.weixin.qq.com/s/40wmMs1gbiZlHMA-Kjy2Ug
