【前端知识】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;
  • 查看比对结果
相关推荐
快起来别睡了2 分钟前
看完你就知道JavaScript 中的对象创建与继承方式原来这么简单?!
javascript
乌兰麦朵11 分钟前
Vue吹的颅内高潮,全靠选择性失明和 .value 的PUA!
前端·vue.js
Goodbaibaibai11 分钟前
创建一个简洁的Vue3 + TypeScript + Vite + Pinia + Vue Router项目
javascript·vue.js·typescript
Code季风11 分钟前
Gin Web 层集成 Viper 配置文件和 Zap 日志文件指南(下)
前端·微服务·架构·go·gin
蓝倾12 分钟前
如何使用API接口实现淘宝商品上下架监控?
前端·后端·api
舂春儿13 分钟前
如何快速统计项目代码行数
前端·后端
毛茸茸13 分钟前
⚡ 从浏览器到编辑器只需1秒,这个React定位工具改变了我的开发方式
前端
Pedantic14 分钟前
我们什么时候应该使用协议继承?——Swift 协议继承的应用与思
前端·后端
Software攻城狮15 分钟前
vite打包的简单配置
前端
Codebee15 分钟前
如何利用OneCode注解驱动,快速训练一个私有的AI代码助手
前端·后端·面试