时间戳

首页 > 解决方案 > 为什么组件要重新渲染两次？

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

问题描述

这是我的 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。那么，为什么第二次点击会导致组件被重新渲染，即使状态没有改变呢？

标签： reactjsreact-hooks

解决方案

从 Github问题中，找到此评论

由于 React 中并发的实现细节，这是一个已知的怪癖。我们不知道当前提交了两个版本中的哪一个。当这种歧义发生时，我们必须过度渲染一次，然后我们知道两个版本是相同的并且没关系。

所以我们不能帮助有问题的组件，但我们可以帮助孩子们不受到影响。

如何？

使用React.memo。

因此，子组件不会受到第二次无用的重新渲染的影响。

推荐阅读