react 类组件的生命周期

react的函数式组件没有生命周期函数这一说，函数式组件要实现生命周期的功能，需要在副作用函数中实现。下面介绍的是类组件的生命周期函数。

react 生命周期图解

初始化阶段

初始化阶段：

先执行 constructor 函数 =》然后是 render 函数 =》然后是 componentDidMount 函数。

  /**
   * 这个函数会在render函数执行之后立即执行，
   * 1. 这时这个函数中可以执行一些关于dom的操作
   * 2. 也可以做一些请求后端数据的工作
   * 3. 也可以做一些定时器之类的活
   */
  componentDidMount() {
    console.log("初始化阶段的最后一个执行函数");
  }

运行阶段

先执行 render 函数=》然后是 componentDidUpdate 函数

  /**
   * 该函数有三个参数
   *  第一个参数是之前的属性
   *  第二个参数是之前的状态
   * 
   * 在这个函数中做一些操作，都需要在判断条件中执行，不然很容易造成死循环
   */
  componentDidUpdate(prevProps, prevState) {
    console.log(prevProps, prevState);
    console.log("更新阶段");
  }

销毁阶段

直接 componentWillUnmount 函数

在这个生命周期函数中做的事：

清除定时器
解绑dom事件

  //   这个函数在组件销毁的时候执行
  componentWillUnmount() {
    console.log("组件销毁了");
  }

总的代码演示

父组件代码：

import React, { Component } from "react";

import Demo from "./Demo";
export default class App extends Component {
  state = {
    flag: true,
  };
  render() {
    return (
      <div>
        <h2>App</h2>
        {this.state.flag && <Demo />}

        <button
          onClick={() => {
            let flag = this.state.flag;
            flag = !flag;
            this.setState({ flag });
          }}
        >
          显示/隐藏子组件
        </button>
      </div>
    );
  }
}

子组件代码：

import React, { Component } from "react";

export default class Demo extends Component {
  constructor() {
    super();
    this.state = {
      num: 0,
    };
  }

  render() {
    return (
      <div>
        Demo
        <h2>{this.state.num}</h2>
        <button
          onClick={() => {
            let num = this.state.num;
            num++;
            this.setState({ num });
          }}
        >
          chang
        </button>
      </div>
    );
  }

  /**
   * 这个函数会在render函数执行之后立即执行，这个函数只会执行一次
   * 1. 这时这个函数中可以执行一些关于dom的操作
   * 2. 也可以做一些请求后端数据的工作
   * 3. 也可以做一些定时器之类的活
   */
  componentDidMount() {
    console.log("初始化阶段的最后一个执行函数");
  }

  /**
   * 该函数有三个参数
   *  第一个参数是之前的属性
   *  第二个参数是之前的状态
   * 
   * 在这个函数中做一些操作，都需要在判断条件中执行，不然很容易造成死循环
   */
  componentDidUpdate() {
    console.log("更新阶段");
  }
    
  // 这个函数在组件销毁的时候执行，这个函数只会执行一次
  componentWillUnmount() {
    console.log("组件销毁了");
  }
    
}

react-3