由于严格的模式，我的反应组件呈现两次

Question

我的反应组件渲染两次。因此，我决定进行逐条调试，问题在这里：

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

react-dom.development.js

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

Answer 1

strictmode渲染组件两次（在开发但不生产上）以检测您的代码问题并警告您（这很有用）。

如果您在应用程序中启用了strictmode，但不记得启用它，则可能是因为您最初使用Create-React-app应用程序或类似于创建您的应用程序，该应用程序最初可以自动启用StrictMode。

例如，您可能会发现您的{app}由＆lt; react.strictmode＆gt; 在您的index.js中包裹：

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

如果是这样，则可以通过删除＆lt; react react来禁用strictmode。 strictmode＆gt; 标签：

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

Answer 2

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

严格模式不能自动为您检测副作用，但它可以通过使它们更确定性来帮助您发现它们。这是通过有意双浏览以下函数来完成的：类组件构造函数，渲染和shorecomponentupdate方法。

来源： react docs：react docs：严格模式

Answer 3

对于Next.js用户，像my-felp，
默认情况下还启用了严格的模式，并引起此问题。

您可以以这种方式禁用它

// next.config.js
module.exports = {
  reactStrictMode: false,
}

Answer 4

在具有 strictmode 的React应用中：

• 如果您看到的双控制台日志：
  

• ，如果您知道严格模式可以帮助您以某种方式优化应用程序

• ，并且您不想完全禁用strictmode

：

在严格模式下第二渲染期间为隐藏日志提供了一种选项。为此：

• 安装扩展名。
• 在您的Chrome Developer Tools窗口中，创建了一个称为组件的新选项卡。单击它。
  
• 然后单击“组件”选项卡中的齿轮图标。
  
• 然后选择调试选项卡，然后在严格的模式下第二次渲染期间检查隐藏日志的选项。
  

您将不再看到控制台中的双日志。

Answer 5

如果您使用nextjs，并且要禁用严格的模式，请访问您的 next.config.js 文件，然后将ReactStrictMode设置为false，

module.exports = {
reactStrictMode: false,
};

但建议开发一旦检查双座是否由Double Mount引起，则建议使用严格的模式。稳定的模式最好启用它

Answer 6

似乎组件呈现两次，但是第一个渲染的组件是不是未置换的？至少那是我与React 17看到的行为，当然可能是我的代码中的错误