(Old) life cycle

mount

1.constructor

The component initially performs data initialization and must include super() to adjust the this pointer

  constructor(props) {
    super(props);
    console.log("Constructor performs");
  }
Copy the code

2.componentWillMount – not often used

The data is initialized but not rendered DOM is generally used for SSR — server rendering

  UNSAFE_componentWillMount() {
    console.log("UNSAFE_componentWillMount execution");
  }
Copy the code

3.render

Component rendering trigger timing:

1. The first time a component is mounted
2. Trigger setState ()
3. Trigger forceUpdate ()
4. Props to change

  render() {
    console.log("Render");
    return (
      <div></div>)}Copy the code

4.componentDidMount

Real DOM rendering is usually performed side effects or asynchronous operations during this lifecycle, such as requesting data, starting timers, event binding, etc

  componentDidMount(){
    console.log("ComponentDidMount execution");
  }
Copy the code

update

1. com ponentWillRecieveProps – not commonly used

Receiving a parameter nextProps: The latest props passed by the parent component is triggered whenever the props passed by the parent component changes. In this case, the props can be processed.

  UNSAFE_componentWillReceiveProps(nextProps) {
    /* nextProps ! == this.props */
    console.log("ComponentWillRecieveProps execution", nextProps, this.props);
  }
Copy the code

2.shouldComponentUpdate

If the component should render, return true, continue with the rest of the lifecycle, return false, do not perform further, generally used for performance optimizations, to prevent unnecessary updates to the render receiving 2 parameters nextProps: The latest return value of state: Boolean

  shouldComponentUpdate(nextProps,nextState){
    console.log("ShouldComponentUpdate execution");
    return true;
  }
Copy the code

3.componentWillUpdate – Not often used

The component will be updated to receive two parameters nextProps: the latest props nextState: the latest state

  UNSAFE_componentWillUpdate(nextProps,nextState){
    console.log("UNSAFE_componentWillUpdate execution");
  }
Copy the code

4.render

Render function

5.componentDidUpdate

The component has been updated, and the real DOM has been rendered on the page to receive two parameters prevProps: props before the update preState: State (new) Parameter: To receive the passed parameter

  componentDidUpdate(prevProps,preState, parameter){
    console.log("ComponentDidUpdate execution");
  }
Copy the code

uninstall

componentWillUnmount

Components are going to be uninstalled, data is going to be destroyed and generally during this life cycle events are going to be unlogged, timers are going to be turned off, side effects are going to be cleared and so on

componentWillUnmount(){
    console.log("ComponentWillUnmount execution");
  }
Copy the code

---

(New) life cycle

update

1. GetDerivedStateFromProps – not commonly used

Instead of componentWillReceiveProps () and componetWillMount nextProps () receiving two parameters: the latest props prevState: The previous state return value: returns an object to update the state or null to indicate that the props received did not change and did not need to update the state

  static getDerivedStateFromProps(nextProps, prevState){
    console.log("GetDerivedStateFromProps execution");
    return null;
  }
Copy the code

2. GetSnapshotBeforeUpdate – not commonly used

The static method, instead of componentWillUpdate() getSnapshotBeforeUpdate is called before the final render. This method is usually used to get some page properties before the update, such as the width and height of the container before the update to receive 2 prevProps: The previous props prevState: the previous state returned value: passed as the third parameter to componentDidUpdate ()

  getSnapshotBeforeUpdate(prevProps, prevState){
    console.log("GetSnapshotBeforeUpdate execution");
    return true;
  }
Copy the code

Life cycle diagram

The old

periodogram

Execution order

new

periodogram

Execution order