React中StrictMode严格模式

当我们使用npm create-react-app my-app创建一个react项目的时候,在项目根目录index.js中有如下所示的一段代码:

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

React.StrictMode组件是什么?
StrictMode是一个用来检查项目中潜在问题的工具。与Fragment一样。它不会渲染任何可见的UI。为其后代元素触发额外的检查和警告。

严格模式检查尽在开发模式下运行,不会影响生产构建。

  • StrictMode 目前有助于

识别不安全的生命周期
关于使用过时字符串 ref API 的警告
关于使用废弃 findDOMNode 方法的警告
检测意外的副作用
检测过时的context API

  • 生命周期警告
    过时的组件生命周期往往会带来不安全的编码实践,具体函数如下
    1、componentWillMount
    2、componentWillReceiveProps
    3、componentWillUpdate

  • ref API 的警告
    React 提供了两种方法管理 refs 的方式:已过时的字符串 ref API 的形式及回调函数 API 的形式。尽管字符串 ref API 在两者中使用更方便,但是它有一些缺点,因此官方推荐采用回调的方式。

  • 检测的副作用
    渲染阶段的生命周期包括以下class组件方法
    1、constructor
    2、componentWillMount (or UNSAFE_componentWillMount)
    3、componentWillReceiveProps (or UNSAFE_componentWillReceiveProps)
    4、componentWillUpdate (or UNSAFE_componentWillUpdate)
    5、getDerivedStateFromProps
    6、shouldComponentUpdate
    7、render
    8、setState 更新函数(第一个参数)

因为上述方法可能会被多次调用,所以不要在它们内部编写副作用相关的代码,这点非常重要。忽略此规则可能会导致各种问题的产生,包括内存泄漏和或出现无效的应用程序状态。不幸的是,这些问题很难被发现,因为它们通常具有非确定性。

严格模式不能自动检测到你的副作用,但它可以帮助你发现它们,使它们更具确定性。通过故意重复调用以下函数来实现的该操作:

1、class 组件的 constructor,render 以及 shouldComponentUpdate 方法
2、class 组件的生命周期方法 getDerivedStateFromProps
3、函数组件体
4、状态更新函数 (即 setState 的第一个参数)
5、函数组件通过使用 useState,useMemo 或者 useReducer

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容