在事件处理程序中进行 setState 调用后，React 何时重新渲染

Question

来自 React DOCS：

https://reactjs.org/docs/state-and-lifecycle.html

状态更新可能是异步的

React 可以将多个 setState() 调用批处理到单个更新中以提高性能。

这完全有道理。如果您有类似下面的函数，那么在每个setState 调用上重新渲染效率会非常低

const [state1,setState1] = useState(false);
const [state2,setState2] = useState(false);
const [state3,setState3] = useState(false);

function handleClick() {
  setState1(true);
  setState2(true);
  setState3(true);
}

因此，在上述情况下，我希望 React 将所有 3 个 setState 调用批处理到一个重新渲染中。它就是这样做的！

但我想知道的是：

一旦handleClick 完成，是否保证重新渲染立即 handleClick 已经完成运行？我的意思是立即，比如立即同步？

从我构建的这个 sn-p 看来，这是真的。在handleClick 完成后，React 将同步应用更新（重新渲染）。如果我的假设有误，请纠正我。

见下面的sn-p：

• 尽可能快地点击 3 倍
• handleClick 将调用 setState 并将记录当前的 props.counter
• App 上有一个昂贵的循环，因此重新渲染需要很长时间
• 您的点击速度将比 React 重新渲染整个应用程序的速度快得多
• 但是你会看到props.counter每次都不一样，没有任何重复，即使你点击多次真的很快
• 这意味着一旦你的第二次点击被处理（这将需要一段时间，因为昂贵的循环），React 已经重新渲染了整个事情，handleClick 函数已经用 @ 的新值重新创建了来自 counter 更新状态的 987654334@。
• 尝试快速点击 5 次，您会发现行为是一样的。

问题

当setState 在事件处理函数内部进行调用时，一旦该处理函数完成运行，是否可以保证在处理函数完成后立即（同步）重新呈现？

function App() {
  console.log("App rendering...");
  const [counter, setCounter] = React.useState(0);

  // AN EXPENSIVE LOOP TO SLOW DOWN THE RENDER OF 'App'
  
  for (let i = 0; i < 100000; ) {
    for (let j = 0; j < 10000; j++) {}
    i = i + 1;
  }

  return <Child counter={counter} setCounter={setCounter} />;
}

function Child(props) {
  console.log("Child rendering...");
  
  // THIS FUNCTION WILL CALL 'setState'
  // AND WILL ALSO LOG THE CURRENT 'props.counter'
  
  function handleClick() {
    props.setCounter(prevState => prevState + 1);
    console.log(props.counter);
  }

  return (
    <React.Fragment>
      <div>Counter: {props.counter}</div>
      <button onClick={handleClick}>Click</button>
    </React.Fragment>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

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

Answer 1

一旦handleClick 完成，是否保证在handleClick 完成运行后立即发生重新渲染？我的意思是立即，例如同步立即

对于某些事件，包括click，React 保证组件将在另一个事件发生之前重新渲染。 （对于像mousemove 这样的其他事件，情况并非如此。）您可以找到哪些事件是哪些here。当前的术语似乎是 DiscreteEvents 是存在此保证的术语，而 UserBlockingEvents 是不保证的术语。很可能在当前的实现中，这意味着它在事件处理结束时同步完成¹，但我认为保证没有那么具体。

我从 Dan Abramov on Twitter 那里学到了这一点（他对事件使用了较旧的术语）。

---

¹ 编辑：事实上，在 his answer Joseph D. 中指出 a comment by Dan Abramov 说现在是这样，但也说“这是实现细节，可能会在未来的版本中改变” em>。

Answer 2

是否保证在处理程序完成后立即（同步）重新渲染？

onClick 是。

As pointed by Dan Abramov:

React 批处理在 React 事件处理程序期间完成的所有 setState，并在退出之前应用它们它自己的浏览器事件处理程序。