一、模拟测试

1. 定义父组件

import React, { Component } from "react";
import OptimizeChildView from "./OptimizeChildView";

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      a: 1,
      b: 1,
    };
    console.log("父组件 constructor");
  }
  
  // 组件创建
  UNSAFE_componentWillMount() {
    console.log("父组件 UNSAFE_componentWillMount");
  }
  componentDidMount() {
    console.log("父组件 componentDidMount");
  }

  // 组件更新
  UNSAFE_componentWillReceiveProps () {
    console.log("父组件 UNSAFE_componentWillReceiveProps");
  }
  shouldComponentUpdate () {
    console.log("父组件 shouldComponentUpdate");
    return true
  }
  UNSAFE_componentWillUpdate () {
    console.log("父组件 UNSAFE_componentWillUpdate ");
  }
  componentDidUpdate() {
    console.log("父组件 componentDidUpdate");
  }
  
  // 组件卸载
  componentWillUnmount () {
    console.log("父组件 componentWillUnmount");
  }
  render() {
    console.log("父组件 render");
    return (
      <>
        <h1>父组件</h1>
        <button onClick={()=>this.setState({a:this.state.a + 1})}>改变状态</button>
        <button onClick={()=>this.setState({b:this.state.b + 1})}>卸载组件</button>
        { this.state.b === 1 ? <OptimizeChildView /> : '' }
      </>
    );
  }
}
export default Test;

2. 定义子组件

import React, { Component } from "react";

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    console.log("子组件 constructor");
  }
  // 组件创建
  UNSAFE_componentWillMount() {
    console.log("子组件 UNSAFE_componentWillMount");
  }
  componentDidMount() {
    console.log("子组件 componentDidMount");
  }


  // 组件更新
  UNSAFE_componentWillReceiveProps () {
    console.log("子组件 UNSAFE_componentWillReceiveProps");
  }
  shouldComponentUpdate () {
    console.log("子组件 shouldComponentUpdate");
    return true
  }
  UNSAFE_componentWillUpdate () {
    console.log("子组件 UNSAFE_componentWillUpdate ");
  }
  componentDidUpdate() {
    console.log("子组件 componentDidUpdate");
  }
  
  // 组件卸载
  componentWillUnmount () {
    console.log("子组件 componentWillUnmount");
  }
  render() {
    console.log("子组件 render");
    return (
      <>
        <h1>子组件</h1>
      </>
    );
  }
}
export default Test;

二、生命周期执行顺序

1. 组件创建阶段

父组件 constructor
父组件 UNSAFE_componentWillMount
父组件 render
子组件 constructor
子组件 UNSAFE_componentWillMount
子组件 render
子组件 componentDidMount
父组件 componentDidMount

2. 组件更新阶段

父组件 shouldComponentUpdate
父组件 UNSAFE_componentWillUpdate 
父组件 render
子组件 UNSAFE_componentWillReceiveProps
子组件 shouldComponentUpdate
子组件 UNSAFE_componentWillUpdate 
子组件 render
子组件 componentDidUpdate
父组件 componentDidUpdate

3. 组件卸载阶段

子组件 componentWillUnmount

三、生命周期功能说明

1. 构造函数 constructor
   常用于定义 state 对象、为自定义方法通过 bind 绑定 this

constructor(props) {
  console.log("constructor 周期");
  super(props);
  this.state = {
    id: "100",
    name: "小明",
  };
}

2. UNSAFE_componentWillMount，render 函数渲染前触发
   常用于获取后端接口请求数据，接收参数，修改 state

UNSAFE_componentWillMount(nextProps, nextState, nextContext) {
  console.log("UNSAFE_componentWillMount 周期");
}

3. 渲染函数 render
   常用于定义jsx模板，一般不在内部书写业务逻辑

render() {
  console.log("render 周期");
  return (
    <>
      {this.state.id}
      {this.state.name}
    </>
  );
}

4. componentDidMount，render 函数渲染后触发
   常用获取 DOM 节点后的后续的操作

componentDidMount() {
  console.log("componentDidMount 周期");
}

5. UNSAFE_componentWillReceiveProps，当组件从父组件中接收参数，且父组件的state被修改后（此修改不包括第一次组件初始化的时候）会触发此组件中的这个生命周期

UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
  console.log("UNSAFE_componentWillReceiveProps 周期");
}

6. shouldComponentUpdate，state或者props改变后触发，决定是否执行 render 函数，用于优化不必要的 render 渲染
   return true 时，不阻止组件渲染，继续执行下面的生命周期
   return false 时，阻止组件渲染，不执行下面的生命周期

shouldComponentUpdate(nextProps, nextState, nextContext) {
  console.log("shouldComponentUpdate 周期");
  return true;
  // return false;
}

7. UNSAFE_componentWillUpdate，render 渲染前触发

UNSAFE_componentWillUpdate(nextProps, nextState, nextContext) {
  console.log("UNSAFE_componentWillUpdate 周期");
}

8. componentDidUpdate，render 渲染后触发

componentDidUpdate(prevProps, prevState, snapshot) {
  console.log("componentDidUpdate 周期");
}

9. componentWillUnmount 组件卸载时触发

componentWillUnmount() {
  console.log("componentWillUnmount 周期");
}