我的React组件由于严格模式而渲染两次

Question

我的React Component渲染两次。所以，我决定进行逐行调试，问题出在这里

 if ( workInProgress.mode & StrictMode) {
        instance.render();
      }

React-dom.development.js

是因为采用严格模式吗？我可以禁用它吗？什么是严格模式？我需要吗？

Answer 1

StrictMode两次渲染组件（在开发阶段而不是生产阶段），以便检测代码中的任何问题并警告您有关问题（这可能非常有用）。

如果您在应用程序中启用了StrictMode，但是不记得启用它，那可能是因为您最初使用create-react-app或类似方法创建了应用程序，默认情况下会自动启用StrictMode。

例如，您可能会在index.js中发现{app}被<React.StrictMode>包装：

  ReactDOM.render(
     <React.StrictMode>
       {app}
     </React.StrictMode>,
    document.getElementById('root')
  );

如果是这样，您可以通过删除<React.StrictMode>标签来禁用StrictMode：

  ReactDOM.render(
    {app}
    document.getElementById('root')
  );

Answer 2

是的，您必须将严格模式删除为

严格模式不能自动为您检测副作用，但是通过使它们更具确定性，它可以帮助您发现它们。这是通过有意重复调用以下函数来完成的：类组件的Constructor，render和shouldComponentUpdate方法。

Answer 3

似乎组件渲染了两次，但第一个渲染的组件未卸载？至少这是我在 React 17 中看到的行为，当然可能是我代码中的一个错误