什么是 StrictMode in React？

我听说严格模式有助于以最佳实践的方式编写 React 代码，它抛出了删除生命周期方法的警告。我从这个 文章上看到的。

我的理解正确吗？严格模式的有效性如何？是否只适用于不安全的生命周期方法？如果不能，我可以在功能组件中使用这个特性吗？

import { StrictMode } from "react";
class Test extends Component{
render(
<StrictMode>
//Some other child component which has all lifecycle methods implemented in it
</StrictMode>
);
}
72649 次浏览
小开
最佳答案

React 的 StrictMode 是一种 帮助器组件，它可以帮助你编写更好的 React 组件，你可以用 <StrictMode />包装一组组件，它基本上是:

  • 验证内部的组件是否遵循 一些的推荐实践，如果不在控制台中，则发出警告。
  • 验证不推荐的方法没有被使用，如果它们被使用，严格模式将在控制台中警告您。
  • 通过识别潜在的风险来帮助你预防一些副作用。

正如文档所说，严格模式是面向开发的，因此您不必担心它会影响您的生产构建。

我发现实现 严格模式特别有用，当我在处理新的代码库时，我想看看我面对的是什么类型的代码/组件。此外，如果您处于 bug 搜索模式，有时候用 <StrictMode />包装您认为可能是问题根源的组件/代码块是一个好主意。

所以，是的，你在正确的道路上理解严格模式，保持下去，我认为这是那些事情之一，你理解得更好，当你玩他们，所以继续和一些乐趣。

小开

警告: 在开发过程中，StrictMode只会呈现组件两次 模式而非生产。

例如，如果您像这样使用 getDerivedStateFromProps方法:

   static getDerivedStateFromProps(nextProps, prevState){// it will call twice
if(prevState.name !== nextProps.name){
console.log(`PrevState: ${prevState.name} + nextProps: ${nextProps.name}`)
return { name: nextProps.name }
}
return {}
}

getDerivedStateFromProps方法将调用两次。 只是为了让您知道这不是一个问题，这只是因为您正在用 index.js文件中的 <StrictMode>包装您的主要组件。

StrictMode呈现组件两次，以检测代码中的任何问题并提醒您注意。

小开

简而言之，StrictMode 有助于识别不安全、遗留或废弃的 API/生命周期。它用于突出显示可能存在的问题。因为它是一个开发人员工具，所以只能在开发模式下运行。为了识别和检测应用程序中的任何问题，并显示警告信息，它会对应用程序中的每个组件进行两次渲染。

小开

StrictMode 是一个突出显示应用程序中潜在问题的工具。像片段一样，StrictMode 不呈现任何可见的 UI。它为其后代激活额外的检查和警告。


提交答案