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

Question

我的 React 组件渲染了两次。所以，我决定逐行调试，问题就在这里

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

React-dom.development.js

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

Answer 1

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

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

来源：React 文档：严格模式

Answer 2

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

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

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

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

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

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

Answer 3

对于像我这样的 Next.js 用户，默认情况下也会启用严格模式并导致此问题。

您可以通过这种方式禁用它

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

Answer 4

在具有StrictMode的 React 应用程序中：

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

• 如果您知道 StrictMode 可以帮助您以某种方式优化您的应用程序

• 而且您不想完全禁用 StrictMode

然后：

React 开发者工具Chrome 扩展提供了在严格模式下第二次渲染期间隐藏日志的选项。为了实现这一点：

• 安装扩展。
• 在 Chrome 开发者工具窗口中，将创建一个名为“组件”的新选项卡。点击它。
• 然后单击组件选项卡内的齿轮图标。
• 然后选择“调试”选项卡，并选中“在严格模式下第二次渲染期间隐藏日志”选项。

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