StrictMode

• strictmode是一个用来突出显示应用程序中潜在问题的工具：
  • 于fragment一样，不会渲染任何可见的ui
  • 它为其后代元素触发二外的检查和警告
  • 严格模式检查仅在开发模式下运行，他们不会影响生产构建

全局开启strictmode

import { createRoot } from "react-dom/client";
import App from "./7-严格模式/App";
import { StrictMode } from "react";

const root = createRoot(document.querySelector("#root"))
root.render(<StrictMode><App/></StrictMode>)

局部开启strictmode

import React, { PureComponent, StrictMode } from 'react'
import Home from './pages/Home'
import Profile from './pages/Profile'

export class App extends PureComponent {
  render() {
    return (
      <div>
        <StrictMode>
          <Home/>
        </StrictMode>
        <Profile/>
      </div>
    )
  }
}

export default App

严格模式检查的是什么？

1. 识别不安全的生命周期

2. 使用过时的ref api

3. 检测意外的副作用：

   • 这个组件的constructor会被调用两次
   • 这是严格模式下故意进行的操作，让你来查看在这里写的一些逻辑代码被调用多次时，时候会产生一些副作用
   • 在生产环境中，是不会被调用两次的

4. 使用废弃的findDOMNode方法

   • 在之前的react api中，可以通过findDOMNode来获取DOM，不过已经不推荐使用了

5. 检测过时的context api

   • 早期的context是通过static属性声明context对象属性，通过getChildContext返回COntext对象等方式来使用Context的
   • 目前这种方式已经不推荐使用