不看就后悔！浅析 React Hooks 的闭包陷阱

2023-12-31 21:44:14

闭包陷阱：React Hooks 中的隐患

React Hooks 是一个强大的工具，它允许我们编写可重用、可维护的组件。然而，在使用 Hooks 时，我们可能会遇到一个常见的陷阱——闭包陷阱 。

什么是闭包陷阱？

闭包陷阱发生在组件内部使用变量时，即使组件的状态已经更新，这些变量仍然保持不变。这会导致组件行为不当，因为变量与组件的状态不一致。

闭包陷阱的示例

让我们用一个示例来理解闭包陷阱。假设我们有一个组件，它使用 useEffect Hook 来设置一个 setInterval 计时器。计时器每秒钟会更新组件的状态，并打印出当前的状态值。

const App = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      console.log(count); // 打印当前的状态值
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  }, [count]);

  return (
    <div>
      <p>Current count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment count</button>
    </div>
  );
};

当我们运行这个组件时，我们会看到这样的输出：

0
1
2
3
...

然而，如果我们在点击按钮后查看控制台，我们会发现输出仍然是 0。这是因为 useEffect Hook 中的 setInterval 计时器在组件第一次渲染时创建，并且它会一直运行，直到组件卸载。即使我们更新了 count 状态，计时器内部的变量仍然是 0，因为计时器是在第一次渲染时创建的。

如何避免闭包陷阱

避免闭包陷阱的方法是使用一个回调函数来调用 setInterval 计时器。回调函数会在每次组件渲染时重新创建，因此它内部的变量将始终与组件的状态一致。

const App = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(count => count + 1); // 使用回调函数更新状态
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  }, [count]);

  return (
    <div>
      <p>Current count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment count</button>
    </div>
  );
};