【前端知识】React 基础巩固(二十八)——StrictMode

React 基础巩固(二十八)——StrictMode

StrictMode

StrictMode 是一个用来突出显示应用程序中潜在问题的工具
- 与 Fragment 一样，StrictMode 不会渲染任何可见的 UI
- 为后代出发额外的检测和警告
- 严格模式检查仅在开发模式下运行，不影响生产构建
严格模式检查什么？
- 1. 识别不安全的生命周期
- 1. 使用过时的 ref API
- 1. 检查意外的副作用
  - 组件的 constructor 会被调用两次（生产环境不会），以查看逻辑代码被多次调用时是否产生副作用
- 1. 使用废弃的 findDOMNode 方法
- 1. 检测过时的 context API
  - 早期的 Context 是通过 static 属性声明 Context 对象属性，通过 getChildContext 返回 Context 对象等方式来使用 Context 的
构建 App.jsx，通过子组件 Home 和 Profile 来查看严格模式和非严格模式的区别

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></Home></StrictMode><Profile></Profile></div>);}
}export default App;

Home.jsx

import React, { PureComponent } from "react";export class Home extends PureComponent {// 严格模式校验 —— 识别不安全的生命周期UNSAFE_componentWillMount() {}// 严格模式校验 —— 识别使用过时的ref APIcomponentDidMount() {console.log(this.refs.title);}constructor(props) {super(props);// 严格模式校验 —— 检查意外的副作用,执行两次console.log("Home componentDidMount");}render() {return <div ref="title">Home</div>;}
}export default Home;

Profile.jsx

import React, { PureComponent } from "react";export class Profile extends PureComponent {// 非严格模式，正常使用UNSAFE_componentWillMount() {}//   非严格模式，正常使用componentDidMount() {console.log(this.refs.title);}constructor(props) {super(props);//   非严格模式，执行一次console.log("Profile componentDidMount");}render() {return (<div>Profile<h2 ref="title"></h2></div>);}
}export default Profile;