当我们使用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
网友评论