【React】React 生命周期完全指南

🌈个人主页: 鑫宝Code
🔥热门专栏: 闲话杂谈｜ 炫酷HTML | JavaScript基础
​💫个人格言: "如无必要，勿增实体"

React 生命周期完全指南

一、生命周期概述

React 组件的生命周期是指组件从创建、更新到销毁的整个过程。合理地使用生命周期方法可以让我们更好地控制组件的行为，优化性能，并处理副作用。

二、生命周期的三个阶段

2.1 挂载阶段（Mounting）

组件实例被创建并插入 DOM 的过程

class MyComponent extends React.Component {
   
  // 1. 构造函数
  constructor(props) {
   
    super(props);
    this.state = {
    count: 0 };
    console.log('1. constructor');
  }

  // 2. 静态方法，很少使用
  static getDerivedStateFromProps(props, state) {
   
    console.log('2. getDerivedStateFromProps');
    return null;
  }

  // 3. 渲染方法
  render() {
   
    console.log('3. render');
    return <div>{
   this.state.count}</div>;
  }

  // 4. 挂载完成
  componentDidMount() {
   
    console.log('4. componentDidMount');
  }
}

2.2 更新阶段（Updating）

当组件的 props 或 state 发生变化时触发更新

class MyComponent extends React.Component {
   
  // 1. 静态方法
  static getDerivedStateFromProps(props, state) {
   
    return null;
  }

  // 2. 是否应该更新
  shouldComponentUpdate(nextProps,