使用React Hooks useEffect时，多个依赖项同时更新会造成数据不稳定

2024-01-14 17:38:43

前言

在React中使用Hooks可以极大地简化组件的代码，其中useEffect是一个非常有用的Hook，它允许我们在组件的生命周期中执行副作用。在useEffect中，我们可以指定一个或多个依赖项，当这些依赖项发生变化时，useEffect就会被再次执行。

然而，在某些情况下，当多个依赖项同时更新时，可能会导致useEffect中的数据返回不稳定。本文将探讨这个问题的原因并提供解决方案，帮助您确保useEffect中的数据更新是可靠和一致的。

问题

以下是一个示例代码，展示了当多个依赖项同时更新时可能出现的问题：

const Component = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('John Doe');

  useEffect(() => {
    console.log(`Count: ${count}, Name: ${name}`);
  }, [count, name]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setName('Jane Doe')}>Change Name</button>
    </div>
  );
};

在这个示例中，我们有两个状态变量：count和name。useEffect的依赖项数组中包含这两个变量，这意味着当count或name发生变化时，useEffect就会被再次执行。

当我们点击“Increment Count”按钮时，count会增加。当我们点击“Change Name”按钮时，name会发生改变。如果我们快速地点击这两个按钮，可能会导致count和name同时更新。

在这种情况下，useEffect可能会被执行两次：一次是由于count的变化，另一次是由于name的变化。但是，useEffect中的数据返回可能不稳定。例如，第一次执行useEffect时，count和name可能都是最新的值，但第二次执行useEffect时，count可能是旧的值，而name可能是新的值。

原因分析

为什么会发生这种情况呢？这是因为useEffect是异步执行的。这意味着当count和name同时更新时，useEffect可能还没有完成第一次执行，就又开始执行第二次执行了。因此，useEffect中的数据返回可能不稳定，因为第一次执行 useEffect 时使用的数据与第二次执行 useEffect 时使用的数据不同。

解决方案

为了解决这个问题，我们可以使用一个技巧，那就是在useEffect中使用一个状态变量来跟踪当前的依赖项值。这样，当useEffect被执行时，我们就可以使用这个状态变量来获取最新的依赖项值。

以下是一个修改后的示例代码：

const Component = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('John Doe');
  const [deps, setDeps] = useState({count: 0, name: 'John Doe'});

  useEffect(() => {
    setDeps({count, name});
  }, [count, name]);

  useEffect(() => {
    console.log(`Count: ${deps.count}, Name: ${deps.name}`);
  }, [deps]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setName('Jane Doe')}>Change Name</button>
    </div>
  );
};