React中StrictMode严格模式

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    
  
);

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