javascript - react 钩子(Hook) : Why do several useState setters in an async function cause several rerenders?

Question

以下 onClick 回调函数将导致 1 次重新渲染:

const handleClickSync = () => {
  // Order of setters doesn't matter - React lumps all state changes together
  // The result is one single re-rendering
  setValue("two");
  setIsCondition(true);
  setNumber(2);
};

React 将所有三种状态更改集中在一起并导致 1 次重新渲染。
然而，下面的 onClick 回调函数会导致 3 次重新渲染:

const handleClickAsync = () => {
  setTimeout(() => {
    // Inside of an async function (here: setTimeout) the order of setter functions matters.
    setValue("two");
    setIsCondition(true);
    setNumber(2);
  });
};

每个 useState 都会重新渲染一次二传手。此外， setter 的顺序会影响每个渲染中的值。
问题 :为什么我使函数异步(此处通过 setTimeout )这一事实会导致状态更改一个接一个地发生，从而导致 3 次重新渲染。如果函数是同步的，只导致一次重新渲染，为什么 React 会将这些状态更改集中在一起？
你可以玩 this CodeSandBox体验行为。

Answer 1

如果代码执行在 react 内部开始(例如，onClick 监听器或 useEffect )，那么 react 可以确保在您完成所有状态设置后，执行将返回到 react 并且可以从那里继续.所以对于这些情况，它可以让代码继续执行，等待返回，然后同步进行一次渲染。
但是，如果代码执行是随机开始的(例如，在 setTimeout 中，或者通过解决一个 promise )，那么当你完成时代码不会返回响应。所以从 react 的 Angular 来看，它正在安静地 sleep ，然后你调用 setState ，迫使 react 就像“啊哈!他们正在设置状态!我最好渲染”。有一些异步方式可以让 react 等待看你是否在做更多事情(例如，超时 0 或微任务)，但没有同步方式让 react 知道你什么时候完成。
在当前版本的 react 中，您可以使用 unstable_batchedUpdates 告诉 react 批量更改多个更改。 :

import { unstable_batchedUpdates } from "react-dom";

const handleClickAsync = () => {
  setTimeout(() => {
    unstable_batchedUpdates(() => {
      setValue("two");
      setIsCondition(true);
      setNumber(2);    
    });
  });
};

一旦 react 18 到来，这将不是必需的，因为他们对并发模式渲染所做的更改将消除对此的需要。