React中的StrictMode是什么



我听说严格模式通过抛出生命周期方法删除警告,有助于以最佳实践的方式编写React代码。我从Medium上的这篇文章中读到了这件事。

我的理解正确吗?严格模式的效果如何?它只适用于不安全的生命周期方法吗?如果不能,我可以在功能组件中使用此功能吗?

import { StrictMode } from "react";
class Test extends Component{
render(
<StrictMode>
//Some other child component which has all lifecycle methods implemented in it
</StrictMode>
);
}

React的StrictMode是一种辅助组件,它将帮助您编写更好的React组件,您可以用<StrictMode />包装一组组件,它基本上:

  • 验证内部组件是否遵循一些推荐做法,如果不在控制台中,则发出警告
  • 请验证未使用不推荐使用的方法,如果使用了这些方法,则严格模式将在控制台中警告您
  • 通过识别潜在风险,帮助您预防某些副作用

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

当我在新的代码库上工作时,我发现实现严格模式特别有用,我想看看我面临的是什么样的代码/组件。此外,如果您处于错误搜寻模式,有时最好使用<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/生命周期。它用于突出显示可能存在的问题。由于它是一个开发工具,所以它只能在开发模式下运行。它会两次渲染web应用程序中的每个组件,以识别和检测应用程序中存在的任何问题并显示警告消息。

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

相关内容

  • 没有找到相关文章

最新更新