关于前端:React严格模式ReactStrictMode

前言

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

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

严格模式(Strict Mode)

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

StrictMode 是一个用以标记出利用中潜在问题的工具。就像 FragmentStrictMode 不会渲染任何实在的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>
    )
}

上述栗子????中,在文件入口中应用,会对它的所有后辈元素都进行查看;在单个组件中应用,会对ComponentTableComponentDialog以及他们的所有后辈元素进行查看,不会对CommonInfo组件运行严格模式。

应用StrictMode的长处:

  • 辨认不平安的生命周期组件
  • 无关新式字符串ref用法的正告
  • 对于应用废除的 findDOMNode 办法的正告
  • 检测意外的副作用
  • 检测过期的 context API

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理