状态更新被另一个（以前的）状态更新覆盖？

Question

我知道这似乎是一个不寻常的例子，但我似乎仍然无法准确解释为什么我在单击div 后从未在控制台上看到valueB 打印？

请注意，由于我在 setTimeout 中调用了两个设置状态调用，它们不是批处理的。

function App() {
  let [a, setA] = React.useState();
  let [b, setB] = React.useState();

  React.useEffect(() => {
    console.log('Entering useEffect', a, b);

    return () => {
      console.log('Entering cleanup', a, b);

      setA(null);
      setB(null);
    };
  }, [a, b]);

  console.log('Render', a, b);

  return (
    <div
      onClick={() => {
        setTimeout(() => {
          setA('valueA');
          setB('valueB');
        }, 100);
      }}
    >
      <h1>Test App</h1>
    </div>
  );
}

ReactDOM.render(
  <App/>,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 1

通常useEffect 及其清理在渲染后被异步调用（在另一个堆栈上）。但是，如果您在计时器中调用 setState 并且有 useEffect 回调，它们会被急切地调用，但所有累积的清理状态更改都会在 setState 调用此操作之后调用。

因此，在您的示例中，当调用 setTimeout 处理程序时：

• 调用setA 时：a 状态已更改，并且清理中的两个状态更改添加到等待状态更改队列
• 调用setB 时：首先将valueB 应用于b，然后从清理中应用null（这里有点批处理）

这会尝试模仿在实际批处理状态更新时的行为，就像在单击处理程序中一样（首先从单击处理程序应用状态更新，然后从 useEffect 应用状态更新）。

当您使用更新函数时，您可以更清楚地看到正在发生的事情：

function App() {
  Promise.resolve().then(() => console.log("**** another stack ****"));
  console.log("before useStateA");
  let [a, setA] = React.useState();
    console.log("between useStates");
  let [b, setB] = React.useState();
    console.log("after useStateB");
  

  React.useEffect(() => {
    console.log('Entering useEffect', a, b);

    return () => {
      console.log('Entering cleanup', a, b);

      setA(() => (console.log("setting a to null from cleanup"), null));
      setB(() => (console.log("setting b to null from cleanup"), null));
    };
  }, [a, b]);

  console.log('Render', a, b);

  return (
    <div
      onClick={() => {
        setTimeout(() => {
          console.log("****timer start****");
          setA(() => (console.log("setting a to valueA from timer"), "valueA"));
          console.log("between timer setters");
          setB(() => (console.log("setting b to valueB from timer"), "valueB"));
          console.log("****timer end****");
        }, 100);
      }}
    >
      <h1>Test App</h1>
    </div>
  );
}

ReactDOM.render(
  <App/>,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>