The react life cycle is divided into several stages-Front-end Q&A-php.cn

The react life cycle is divided into several stages

WBOY

Release： 2022-04-29 17:36:08

Original

9014 people have browsed it

The react life cycle is divided into 3 stages; they are: 1. The creation stage, also known as the initialization stage, which represents the process when the component is rendered in the DOM tree for the first time; 2. The update stage, also known as the initialization stage. It is called the existence stage, which represents the process in which the component is re-rendered; 3. The unloading stage, also called the destruction stage, represents the process in which the component is deleted from the DOM.

The react life cycle is divided into several stages

The operating environment of this tutorial: Windows 10 system, react17.0.1 version, Dell G3 computer.

The react life cycle is divided into several stages

The concept of life cycle is widely used, especially in many fields such as economy, environment, technology, society and so on. Its basic The meaning can be commonly understood as the entire process of "cradle-to-grave"

Like Vue, the entire component life cycle of React includes creation, initialization of data, compilation of templates, and mounting of Dom →Rendering, update→Rendering, uninstallation and a series of processes

Process

Here we mainly talk about the life cycle after react16.4, which can be divided into three stages:

Creation Phase
Update Phase
Uninstall Phase

Creation Phase

The creation phase is mainly divided into the following life cycle methods:

Constructor (don’t ask me why I use Chinese, because English will be swallowed up, it’s too difficult)
getDerivedStateFromProps
render
##componentDidMount

Constructor

Method automatically called during the instance process. Inside the method, props from the parent component are obtained through the super keyword

In this method, the usual operations are Initialize the state or mount the method on this

getDerivedStateFromProps

This method is a new life cycle method and is a static method, so the component cannot be accessed Example

Execution timing: During the component creation and update phase, whether it is a props change or a state change, it will also be called

before each render method, and the first parameter is the one that is about to be updated. props, the second parameter is the state of the previous state. You can compare props and state to add some restrictions to prevent useless state updates

This method needs to return a new object as the new state or return null Indicates that the state does not need to be updated

render

A method that class components must implement for rendering the DOM structure and can access component state and prop attributes

Note: Do not setState in render, otherwise it will trigger an infinite loop and cause memory crash

componentDidMount

The component is executed after it is mounted to the real DOM node, which is executed in the render method Then execute

This method is mostly used to perform some data acquisition, event monitoring and other operations

Update stage

The functions in this stage are mainly the following methods:

getDerivedStateFromProps
shouldComponentUpdate
render

getDerivedStateFromProps

This method is introduced as above

shouldComponentUpdate

Used to tell the component itself whether it needs to re-render the component based on the current props and state. By default, true is returned.

Execution timing: It will be called when new props or state are reached, by returning true Or false to tell whether the component is updated or not

In general, it is not recommended to perform deep comparisons in this cycle method, which will affect efficiency

At the same time, setState cannot be called, otherwise it will cause an infinite loop to call update

render

The introduction is as above

getSnapshotBeforeUpdate

This periodic function is executed after render. The DOM element has not been updated yet

The Snapshot value returned by this method is passed in as the third parameter of componentDidUpdate

getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log(&#39;#enter getSnapshotBeforeUpdate&#39;);
    return &#39;foo&#39;;
}
componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(&#39;#enter componentDidUpdate snapshot = &#39;, snapshot);
}

Copy after login

The purpose of this method is to obtain some information before the component is updated, such as the component The scroll position and the like, after the component is updated, some UI visual states can be restored based on this information

componentDidUpdate

Execution timing: Triggered after the component update is completed

In this method, you can perform corresponding operations based on the changes in props and state before and after, such as obtaining data, modifying DOM styles, etc.

Unloading phase

componentWillUnmount

This method is used to clean up some registered listening events, or cancel subscribed network requests before component uninstallation.

Once a component instance is uninstalled, it will not be mounted again. , and can only be recreated

Recommended learning: "

react video tutorial

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