在事件处理程序内进行setState调用后，React何时重新渲染 [英] When does React re-render after a setState call made inside an event handler

问题描述

从React DOCS:

From React DOCS:

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

状态更新可能是异步的

React可以将多个setState()调用批处理为一个更新，以提高性能.

React may batch multiple setState() calls into a single update for performance.

这很有道理.如果您具有类似以下功能的内容，则在每次 setState 调用

This makes total sense. If you have something like the function below, it would be very inefficient to re-render on every setState call

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 调用批处理为单个重新渲染.确实做到了！

So, in the situation above, I expect React to batch all 3 setState calls into a single re-render. And it does exactly that!

但是我想知道的是:

handleClick 完成后，是否保证立即 handleClick 完成重新渲染?我的意思是立即立即开始，就像立即同步一样?

Once handleClick has completed, is a re-render guaranteed to happen immediatelly handleClick has done running? I mean literally immediately, like synchronously immediately?

从我构建的该代码段来看，这似乎是对的. handleClick 完成后，React将同步应用更新(重新渲染).如果我猜错了，请纠正我.

From this snippet that I've build, it seems that this is true. React will synchronously apply the updates (re-render) after handleClick has completed. Correct me if I'm wrong in assuming that.

请参见下面的代码段

• 最快点击3遍
• handleClick 将调用 setState ，并将记录当前 props.counter
• App 上存在一个昂贵的循环，因此重新渲染将花费很长时间
• 您将能够以比React重新呈现整个应用程序的速度更快的速度单击
• 但是您会发现 props.counter 每次都不同，没有任何重复，即使您快速单击多次也是如此
• 这意味着处理完第二次点击(由于昂贵的循环会花一些时间)后，React已经重新渲染了整个内容，并且 handleClick 函数已经用来自 counter 更新状态的 props.counter 的新值.
• 尝试快速单击5次，您会发现行为是相同的.

• Click 3 times as fast as you can
• handleClick will call a setState and will log the current props.counter
• There is an expensive loop on App, so it will take a long time to re-render
• You'll be able to click much faster than React can re-render the whole App
• But you'll see the props.counter is different every time, without any repetition, even if you click multiple times really fast
• It means that once your 2nd click is processed (it will take a while because of the expensive loop), React has already re-rendered the whole thing and the handleClick function has already been recreated with the new value for props.counter that came from the counter updated state.
• Try clicking 5 times really fast and you'll see that the behavior is the same.

问题

当在事件处理程序函数内进行 setState 调用时，一旦该处理程序函数完成运行，是否可以保证在处理程序完成后立即(同步)进行重新渲染?

When setState calls are made inside an event handler function, once that handler function has completed running, is it guaranteed that a re-render will occur immediately (synchronously) after that completion of the handler?

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"/>

推荐答案

handleClick 完成后，是否保证重新渲染会立即发生? handleClick 已经完成?我的意思是立即从字面上讲，像立即同步上一样

Once handleClick has completed, is a re-render guaranteed to happen immediatelly handleClick has done running? I mean literally immediately, like synchronously immediately

对于某些事件，包括 click ，React保证在另一个事件发生之前会重新渲染组件.(对于其他事件，例如 mousemove 则不是这种情况.)您可以找到哪些事件是哪些

For certain events, including click, React guarantees that the component will be re-rendered before another event can occur. (This isn't the case for other events like mousemove.) You can find which events are which here. The current terminology seems to be that DiscreteEvents are the ones for which this guarantee exists, and the UserBlockingEvents are the ones for which it isn't guaranteed. It may well be that in the current implementation that means it's done synchronously at the end of the event handling¹, but I think the guarantee is less specific than that.

我是从Dan Abramov 在Twitter上(他在事件中使用了较旧的术语).

I learned this from Dan Abramov on Twitter (he used the older terminology for the events).

¹实际上，在他的答案中，约瑟夫·D.指向.

¹ and in fact, in his answer Joseph D. points to a comment by Dan Abramov saying that it is, for now, but also saying "This is implementation detail and may change in future versions".

这篇关于在事件处理程序内进行setState调用后，React何时重新渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！