This article is a review of the React Life cycle. It contains notes from the React Engineer’s Guide on the Life cycle.

1. Three stages of the life cycle:

The React component has three phases in its lifecycle:

  1. Mounting Phase (Mounting) : This phase starts with the component initialization and continues until the component is created and rendered into the real Dom.
  2. Updating: This phase starts with component updates and continues until component updates are complete and re-rendered to the real Dom.
  3. Unmounting: In this stage, the listener component is unmounted from the Dom.

2. Life cycle functions hanging in phases:

  1. constructor(props): inherited fromComponentClass, don’t forget to addsuper
  2. static getDerivedStateFromProps(frompropsTo derivestate🤣) : can be obtained during the mount phaseThe current props and stateAnd then according topropsCome to the rightstatePay attention to the following problems when using:
    1. Internal unusablethis;
    2. This method is inThe React of 16.3Only after version
    3. There must be a return value, and the return value is correctstateIs equivalent to a call elsewheresetStatus()When passed in to modify the object.
    4. The component must be available initiallystateattribute
  3. componentWillMountThe component will be mounted
    1. React16.3 is not recommended for use after React16.3UNSAFE_ComponentWillMount
    2. Can’t andgetDerivedStateFromPropsAt the same time use
    3. render: Generates a virtual DOM from the contents of the return and submits it toReactDOMRender the real DOM.
  4. componentDidMount: Component has been mounted, virtualdomHas been added to the realdomIn the now.
import React, { Component } from 'react';
class App extends Component {
  constructor(props){
    super(props);
    console.log("1- Component initialization");
    this.state = {
      nba:"Kobe"
    };
  }
  // 🚀 cannot be used with the willMount method
  static getDerivedStateFromProps(props,state){
    console.log("2- map props to state");
    return {nba:iverson}; }componentWillMount(){
    console.log("3- Components about to be mounted");
  }
  render(){
    console.log("4- Generate virtual DOM based on return");
    return <h1>hello react</h1>
  }
  componentDidMount(){
    console.log("5- Component mounted, virtual DOM added to real DOM"); }}export default App;

Copy the code

3. Life cycle function of update stage:

There are three types of updates: parent component updates, component updates, and forceUpdate

3.1 Parent Component Update:

🚀 16.3 before:

Parent component updates cause child component updates in the order:

ComponentWillReceiveProps – > shouldcomponentUpdate – > componentWillUpdate – > render – > comoponentDidUpdate

🚀 16.3:
  • getDerivedStateFromPropsMethod instead ofcomponentWillReceiveProps;
  • componentWillReceivePropsandcomponentWillUpdateIt was gradually abandoned

After 🚀 16.3:

GetDerivedStateFromProps –> shouldcomponentUpdate –> Render –> getSnapshoutBerforUpdate –> componentDidupdate

  • getSnapshoutBerforUpdate(prevProps,prevState): it is inrenderMethod to generateVirtual domAnd then, renderReal domBefore, right nowthis.propsandthis.stateIt’s updatedpropsandstate.
  • In addition, this method must have a return value, which is passed tocomponentDidUpdate
import React, { Component } from 'react';
class Child extends Component {
  state = {
    name: "child"
  }  
  getSnapshotBeforeUpdate(prevPorps,prevState){
    console.log("4- DOM for getting updates");
    return {
      info: "Information to pass to componentDidUpdate."}}{info:" Information to pass to componentDidUpdate "}
  componentDidUpdate(prevPorps,prevState,snapshot){
    console.log("5- Component finisher",snapshot);
  }
  render(){
    / /... slightly}}export default Child;
Copy the code

3.2 Component Self-update:

Self-update of a component is primarily an update of the current component caused by a call to the setStatus method. There have also been 3 versions of changes:

🚀 16.3 before:

ShouldComponentUpdate –> compoonentWillUpdate –> render –> componentDidUpdate Listen state modification)

🚀 16.3:

shouldComponentUpdate —> render —> getSnapshotBeforeUpdate —> componentDidUpdate

🚀 16.4 and beyond:

static getDerivedStateFromProps —> shouldComponentUpdate —> render —> getSnapshotBeforeUpdate —> componentDidUpdate

3.3 Forced Update:

If the dependent data is not state or props and the data changes and the view is expected to change, use forceUpdate.