【React.js】<StrictMode>

什么是 Strict Mode 严格模式？

<StrictMode>是 React 官方提供给开发者的一个包裹组件，它可以用于检测和警告一些不安全的操作，从而帮助开发者避免一些潜在的问题。

StrictMode 的基本用法

<StrictMode>
  <App />
</StrictMode>

StrictMode 的作用

• StrictMode 可以帮助你在开发阶段尽早地找到一些常见的问题。
• 在开发阶段添加 StrictMode 给内部组件树提供了额外的开发体验和告警，具体表现为
  • 组件将 重新渲染一次，以查找由于非纯渲染而引起的错误。
  • 组件将 重新运行 Effect 一次，以查找由于缺少 Effect 清理而引起的错误。
  • 组件将被 检查是否使用了已弃用的 API。(e.g componentWillUpdate, componentWillReceiveProps, componentWillMount, findDOMNode)

关于 StrictMode 的一些补充点

StrictMode 的 props

StrictMode 是 React 官方提供的一个纯包裹检查组件，它不需要提供其他的参数

StrictMode 的覆盖范围

根据覆盖范围的不同，我们可以使用：

• StrictMode 全局覆盖
• StrictMode 局部覆盖

# StrictMode 全局覆盖

严格模式为 <StrictMode> 组件内的整个组件树启用额外的开发环境检查，这些检查有助于在开发过程中尽早地发现组件中的常见错误。

如果要为整个应用启用严格模式，请在渲染根组件时使用 <StrictMode> 包裹它：

# StrictMode 局部覆盖

你也可以为应用程序的任意一部分启用严格模式：

import React, { Component, StrictMode } from 'react';

import Comp1 from '@/components/Comp1';
import Comp2 from '@/components/Comp2';
import Comp3 from '@/components/Comp3';

class App extends Component {
  render() {
    return (
      <div>
        <StrictMode>
          <Comp1 />
        </StrictMode>
        <Comp2 />
        <Comp3 />
      </div>
    );
  }
}

修复严格模式发出的弃用警告

React 会在任何一个位于 <StrictMode> 树中的组件使用以下弃用 API 时发出警告：

• findDOMNode，请参考替代方案。
• UNSAFE_ 类生命周期方法，例如 UNSAFE_componentWillMount，请参考替代方案。
• 旧版上下文（childContextTypes、contextTypes 和 getChildContext），请参考替代方案。
• 旧版字符串引用（this.refs）,请参考替代方案。
• 这些 API 主要用于旧版的 类式组件，因此在新版程序中很少出现。