React严格模式-React.StrictMode

前言

因为才开始学习关于React的开发，所以很多时候会遇见一些未曾用过的API、方法等。因此将这些知识点记录下来，也可以供同我一样的新入门童鞋学习。

因为目前做的项目是直接上手公司现有的React项目，就用到的一些API可能就是洗项目中显有的，而今天看见一个标签 <React.StrictMode>，在目前项目中也没有出现，就在想这个是不是和Javascript中的严格模式“use strict”一样呢？那本着不懂就问的原则，开始了今天的知识学习。

严格模式（Strict Mode）

严格模式在官网中这样介绍：

StrictMode 是一个用以标记出应用中潜在问题的工具。就像 Fragment ，StrictMode 不会渲染任何真实的UI。它为其后代元素触发额外的检查和警告。

注意: 严格模式检查只在开发模式下运行，不会与生产模式冲突。

你可以在代码的任何地方启用严格模式。例如：

// 文件入口
React.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById("root")
)

// 单个组件中
import React from "react";

function Home() {
    return (
        <div className="home">
            <React.StrictMode>
                <ComponentTable />
                <ComponentDialog />
            </React.StrictMode>
            <CommonInfo />
        </div>
    )
}

上述栗子🌰中，在文件入口中使用，会对它的所有后代元素都进行检查；在单个组件中使用，会对ComponentTable和ComponentDialog以及他们的所有后代元素进行检查，不会对CommonInfo组件运行严格模式。

使用StrictMode的优点：

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