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

Posted 2023-02-21

【中文标题】由于严格模式，我的 React 组件渲染了两次

【英文标题】：My React Component is rendering twice because of Strict Mode

【发布时间】：2020-07-29 22:28:25

【问题描述】：

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

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

React-dom.development.js

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

【参考方案1】：

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

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

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

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

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

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

【讨论】：

应该是答案。这在任何地方都没有突出显示。你能分享一些来自 react docs 的参考链接吗？

@manjs 恐怕我学会了这个“艰难的方法”，不确定是否有任何关于它的文档。

docs 在开发模式中引用了有意的“双重调用”：“严格模式不能自动为您检测副作用，但它可以通过使它们更具确定性来帮助您发现它们. 这是通过有意双重调用以下函数来完成的”

【参考方案2】：

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

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

来源：React Docs: Strict Mode

【讨论】：

如果我可以补充一下，如果您继续使用它，它将帮助您更早地发现错误，从而帮助您编写更具弹性的组件。所以它不是你需要它，但非常推荐你使用它。请注意，双重渲染仅发生在开发中，不会发生在生产中。

@Jackyef 如何删除它？或者，将我的应用程序置于生产模式？ <React></React> 给出一个错误..

只要去掉包裹在你应用上的<React.StrictMode>就可以了。

你错过了 app 后面的逗号，就像这个 app，

【参考方案3】：

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

【讨论】：

我认为这是你的错误。也许你的状态是一个嵌套对象。你应该完全解构它