React hooks的闭包陷阱是怎么回事

前言

由于公司项目用的技术栈是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 创建状态时，该状态是通过闭包来保存的。

让我们深入探讨为什么会发生这种情况：

1. useState 的异步性： useState 是异步的。当你调用 setCount 时，React 不会立即更新状态，而是将更新加入到更新队列中。因此，在 setCount 被调用后，count 并不会立即改变。

2. useEffect 的闭包： 在 useEffect 中，当你引用 count 时，它会捕获在创建 useEffect 时的 count 值，而不是在 useEffect 执行时的最新值。因此，闭包中的 count 值可能是旧的。

3. 渲染周期和事件处理： 在 React 中，事件处理函数和 useEffect 中的回调函数都是在渲染周期中创建的。因此，当事件处理函数或 useEffect 回调函数中引用了 count 时，它们会捕获在它们创建时的 count 值。

为了解决这个问题，React 提供了函数式更新的机制，通过传递一个函数给 setCount，该函数接收前一个状态，并返回新的状态值。这样确保在回调函数中使用的是最新的状态值，而不是闭包中的旧值。

setCount(prevCount => {
  console.log('Current count:', prevCount);
  return prevCount;
});