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

Question

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

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

React-dom.development.js

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

Answer 1

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')
  );