reactjs - 为什么组件被重新渲染两次？

Question

这是我的 App.js 代码

function App() {
  console.log('Rendering the App  component');
  const [someBooleanVar, updateBooleanVar] = React.useState(false);

    console.log(someBooleanVar);

  const clickHandler = () => {
    console.log('In clickHandler');
    console.log(someBooleanVar);
    updateBooleanVar(true);
  };

  return (
    <div className="app">
      <h1>Test App</h1>
      <button onClick={clickHandler}>Toggle</button>
    </div>
  );
}
    
ReactDOM.render(<App />, document.querySelector('#app'));

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

当页面第一次加载时，我在控制台上看到:

Rendering the App  component
App.js:12 false

现在，当我单击按钮时，控制台显示:

In clickHandler
App.js:16 false
App.js:8 Rendering the App  component
App.js:12 true

如果我第二次单击该按钮，控制台会打印:

In clickHandler
App.js:16 true
App.js:8 Rendering the App  component
App.js:12 true

在随后的点击中，这些行被打印出来:

In clickHandler
App.js:16 true

我的问题:在第一次单击时，状态已从 false 更新为 true。那么，为什么第二次点击会导致组件被重新渲染，即使状态没有改变？

Answer 1

来自 Github issue , 查找 this评论

This is a known quirk due to the implementation details of concurrency in React. We don't cheaply know which of two versions is currently committed. When this ambiguity happens we have to over render once and after that we know that both versions are the same and it doesn't matter.

所以我们无法帮助有问题的组件，但我们可以帮助 children 不受影响。
如何？
使用 React.memo .
因此，子组件不会受到第二次无用的重新渲染的影响。