React hooks：为什么异步函数中的多个 useState setter 会导致多次重新渲染？

IT技术 javascript reactjs react-hooks
2021-05-04 01:57:58

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

这是对每个useStatesetter 的重新渲染。此外，setter 的顺序会影响每个渲染中的值。

问题：为什么我使函数异步（此处为 via setTimeout）这一事实会导致状态更改一个接一个地发生，从而导致 3 次重新渲染。如果函数是同步的，只导致一次重新渲染，为什么 React 会将这些状态变化混为一谈？

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

2个回答

如果代码在 react 内部执行（例如，onClick侦听器或 a useEffect），那么 react 可以确保在您完成所有状态设置后，执行将返回 react 并且可以从那里继续。所以对于这些情况，它可以让代码继续执行，等待返回，然后同步做单次渲染。

但是如果代码执行是随机开始的（例如，在 a 中setTimeout，或者通过解析一个 promise），那么当你完成时代码不会返回来做出react。所以从 react 的角度来看，它正在安静地睡觉，然后你调用setState，迫使 react 像“啊哈！他们正在设置状态！我最好渲染”。有一些异步方式 react 可以等待，看看您是否正在做更多事情（例如，超时 0 或微任务），但是没有一种同步方式让 react 知道您何时完成。

在当前版本的 react 中，您可以使用以下命令告诉 react 批处理多个更改unstable_batchedUpdates：

import { unstable_batchedUpdates } from "react-dom";

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

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

现在只setState在事件处理程序中响应批处理同步。但是在 react 18 中，它将在setTimeout, useEffects 等中可用这是 Dan https://github.com/reactwg/react-18/discussions/21 的出色解释

其它你可能感兴趣的问题
上一篇印刷塑料更换零件 下一篇如何在 React 中执行下一个函数之前完成所有获取？