反应钩子：为什么一个异步函数中的几个USESTEAT设置器会导致几个重新编写器？

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);
};

Reaction将所有三种状态的变化聚集在一起，并导致1个重新生成器。

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

您可以使用这个CodeSandBox来体验这种行为。

Answer 1

现在只在事件处理程序中对批处理syncsetstate进行响应。但是在React18中，它可以在settimeout、useeffects等中使用。这里有来自Dan https://github.com/reactwg/reactwg/react-18/discussions/21的精彩解释