【前端知识】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,通过子组件 HomeProfile 来查看严格模式和非严格模式的区别

javascript 复制代码
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
javascript 复制代码
import React, { PureComponent } from "react";

export class Home extends PureComponent {
  // 严格模式校验 ------ 识别不安全的生命周期
  UNSAFE_componentWillMount() {}

  // 严格模式校验 ------ 识别使用过时的ref API
  componentDidMount() {
    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
javascript 复制代码
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;
  • 查看比对结果
相关推荐
不一样的少年_5 分钟前
1024程序员节:用不到100行代码做个“代码雨屏保”装X神器(附源码)
前端·javascript·浏览器
阿奇__10 分钟前
el-table默认排序设置
前端·javascript·vue.js
hongc9315 分钟前
element-ui el-table 设置固定列fixed 高度不对
前端·vue.js·elementui
Forfun_tt27 分钟前
xss-labs pass-12
前端·xss
云枫晖43 分钟前
Webpack系列-编译过程
前端·webpack
AskHarries1 小时前
Toolhub — 一个干净实用的在线工具集合
前端·后端
H尗1 小时前
Vue3响应式系统的精妙设计:深入理解 depsLength 与 trackId 的协同艺术
前端·vue.js
昔人'1 小时前
html`contenteditable`
前端·html
爱宇阳1 小时前
npm 常用标签与使用技巧新手教程
前端·npm·node.js
郑板桥301 小时前
TypeScript:npm的types、typings、@type的区别
javascript·typescript·npm