Detailed explanation of react life cycle

The life cycle of React is divided into initialization phase, update and destruction phase. Initialization represents the first rendering of the component in the DOM tree, update represents the process of re-rendering the component; destruction represents the process of deleting the component from the DOM

React is a JavaScript library used to build user interfaces. It is mainly used For building UI, it has high performance and the code logic is very simple. What I will introduce today is the life cycle of React, which has a certain reference effect and I hope it will be helpful to everyone.

【Recommended course: react tutorial】

The react life cycle is divided into three stages: initialization stage, update stage, and destruction stage. Next, in the article, I will introduce you in detail

Initialization phase:

That is, the component is rendered in the DOM tree for the first time

import React, { Component } from 'react';

class Test extends Component {
  constructor(props) {
    super(props);
  }
}

The initialization phase is the same as the construction method of the class in the above code. The Test class inherits the react Component base class, which is equivalent to inheriting the react base class, so that render(), that is, the life cycle and other methods can be used.

Super(props) in the code is mainly used to call the constructor() of the base class. It also injects the props of the parent component into the child component for the child component to read. What needs to be noted here is that the props in the component are read-only and immutable, while the state is mutable.

The constructor() is used to initialize some components, such as defining the initial content in this.state

Update phase:

Indicates the process of component being re-rendered

When props or state is modified, the update process of the component will be triggered

componentWillReceiveProps（nextProps）

When the render function of the parent component is called, in the render function The child components rendered in will all go through the update process. No matter whether the props passed by the parent component to the child component have changed or not, componentWillReciveProps will be triggered.

Note that the update triggered by this.setState will not call the above method. If the call to this.setState triggers the above method, it will cause an infinite loop. Only when nextProps and this.props change, this.setState will be called to update the state inside the component

shouldComponentUpdate（nextProps，nextState）

This method determines when a component does not need to be rendered. If used appropriately, Will improve performance

When true is returned, componentWillUpdate, render, componentDidUpdate will be called, otherwise there will be no subsequent method calls.

In fact, when React does server-side rendering, it basically does not go through the update process, because server-side rendering only needs to produce HTML strings, and the initialization phase can be achieved, so Under normal circumstances, the server will not call the compentDidUpdate method. If it is called, it means that the program has gone wrong and needs to be improved.

Destruction phase:

means that the component is deleted from the DOM The process

There is only one life cycle method in the destruction phase:

componentWillUnmount

This method is called before the component is destroyed, and mainly performs some cleanup work, such as clearing the timer used in the component, componentDidMount Manually created DOM elements, etc. to avoid causing memory leaks.

Summary: The above is the entire content of this article, I hope it will be helpful to everyone.

The above is the detailed content of Detailed explanation of react life cycle. For more information, please follow other related articles on the PHP Chinese website!