A brief analysis of the life cycle of React components (code analysis)

This article brings you a brief analysis of the life cycle (code analysis) of React components. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The entire React life cycle has three stages: creation, update, and uninstall. Each stage has corresponding work and methods. We can study it by looking at the following classic diagram:

The first stage

This is the stage of virtual DOM creation. Five methods will be executed in sequence. Among these five methods, except the render method, the other four methods It is only called once in the entire life cycle, and it will definitely be called once:

• getDefaultProps()

This method is created when the component instance is created Before, that is, before the constructor is executed, get the parameters passed by the parent component. You can edit the parameters here and return the new parameters as props

• getInitalState()

When the component is created, this method will be called to initialize the state of the component

• componentWillMount()

In the component This method is executed before render and can be used to modify state. React first calls this function of the parent component, and then calls this function of the child component

• render()

Start the component rendering function and return a A virtual DOM with only one root node. The component's state cannot be modified synchronously in this function.

• componentDidMount()

After render rendering, notify that the component has been loaded. React first calls this function of the child component, and then calls this function of the parent component. Starting from this function, the component can interact with other frameworks. For example, setting a timer or making a network request.

Second stage

At this time, the component has entered the stable operation stage. At this stage, the component can handle user interaction or receive events to update the interface. The following methods can be executed many times during the entire life cycle, or not executed once.

• componentWillReceiveProps()

This function of the child component will be called when the corresponding parameters in the parent container change. New props will be passed in as parameters, and old props can be obtained based on this.props. We can do some processing on state in this function. And updating the state in this function will not cause secondary rendering

• shouldComponentUpdate()

This function passes two parameters, the new state and new props. Changes in state and props will be called to this function. This function mainly makes judgments on the passed nextProps and nextState. If it returns true, it will be re-rendered (default is true), if it returns false, it will not be re-rendered. Under certain conditions, we can choose to update or not update based on the passed props and state, thereby improving efficiency.

• componentWillUpdate()

Similar to the componentWillMount method, it is called before render. The component will receive new props or state. After this function is called, nextProps and nextState will be set to this.props and this.state respectively.

• componentDidUpdate()

Similar to the componentDidMount method, it is called after render is rendered and this function is called after the real DOM is generated. The parameters passed are the previous props and state.

The third stage

This is the death stage, which mainly cleans and releases memory. There is only one method at this stage, which is called only once during the entire life cycle.

• componentWillUnmount()

When the component is to be removed from the interface, componentWillUnmount will be called. Some related destruction operations are performed here, such as canceling timers, event monitoring, etc.

Several situations that trigger render

Here we only consider shouldComponentUpdate has not been modified, and always returns true

• First rendering, that is, Initial Render

• Call this.setState (it will not be triggered every time setState is called, react will optimize, such as the input component of antd)

• The parent component occurs Update, usually the modified props of the child component

• If the parent component triggers render, the child component will of course trigger the render

• call accordingly this.forceUpdate()

A simple example

import React from 'react';
import ReactDOM from 'react-dom';
import style from './font.css';
import './index.less';

class Parent extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      willRender: true,
      prop: 1
    };
  }

  render(){
    return (
      <div>
        <button>{this.setState({prop: 10})}}>changePropsFromParent</button>
        {
          this.state.willRender &&
          <child></child>
        }
        <button>{this.setState({willRender: false})}}>UnmountChild</button>
      </div>
    );
  }
}

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      curr: 0
    };
  }

 getDefaultProps(){
   console.log('getDefaultProps');
 }

  getInitalState(){
    console.log('getInitalState');
  }

  componentWillMount(){
    console.log('componentWillMount');
  }

  componentDidMount(){
    console.log('componentDidMount');
  }

  componentWillReceiveProps(){
    console.log('componentWillReceiveProps');
  }

  shouldComponentUpdate(){
    console.log('shouldComponentUpdate');
    return true;
  }

  componentWillUpdate(){
    console.log('componentWillUpdate');
  }

  componentDidUpdate(){
    console.log('componentDidUpdate');
  }

  componentWillUnmount(){
    console.log('componentWillUnmount');
  }

  render() {
    console.log('render')

    return (
      <div>
        <button>this.setState({curr:2})}>setState</button>
        <button>{this.forceUpdate();}}>forceUpdate</button>
      </div>
    );
  }
}

ReactDOM.render(
  <parent></parent>,
  document.getElementById('root')
);

Related recommendations:

React component life cycle instance analysis

How long is the life cycle of React Native components

The above is the detailed content of A brief analysis of the life cycle of React components (code analysis). For more information, please follow other related articles on the PHP Chinese website!