React-3类组件生命周期

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 函数

  /**
      在组件销毁的时候执行
          1. 清除定时器
          2. 解绑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("组件销毁了");
    }
  }
  

  \