Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you what are the relevant knowledge points about the stage of the react life cycle, the content is detailed, and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

The react life cycle is divided into three stages: 1, the creation phase, also known as the initialization phase, represents the process of rendering the component in the DOM tree for the first time; 2, the update phase, also known as the existence phase, indicates the process of the component being re-rendered; and 3, the uninstall phase, also known as the destruction phase, represents the process of removing the component from the DOM.

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

The react life cycle is divided into several phases

The concept of Life Cycle is widely used, especially in many fields, such as economy, environment, technology, society and so on. Its basic meaning can be understood as the whole process of "from cradle to grave" (Cradle-to-Grave).

Like Vue, the entire component life cycle of React includes a series of processes from creating, initializing data, compiling templates, mounting Dom → rendering, updating → rendering, uninstalling, etc.

Process flow

This is mainly about the life cycle after react16.4, which can be divided into three phases:

Creation Pha

Update phase

Unloading Pha

Creation Pha

The creation phase is mainly divided into the following lifecycle methods:

Constructor (don't ask me why I use Chinese, because English will be swallowed, it's too difficult)

GetDerivedStateFromProps

Render

ComponentDidMount

Constructor function

The method called automatically during the instance, and the props from the parent component is obtained by the super keyword inside the method

In this method, the usual operation is to initialize the state state or mount the method on the this

GetDerivedStateFromProps

This method is a new lifecycle method and is a static method, so the instance of the component cannot be accessed.

Timing of execution: component creation and update phases, whether props changes or state changes, will also be called

Called before each render method, the first parameter is the props to be updated, and 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 a new state or return null to indicate that the state status does not need to be updated.

Render

Method that must be implemented by a class component to render the DOM structure and access the state and prop properties of the component

Note: do not setState in render, otherwise it will trigger a dead loop and cause memory corruption.

ComponentDidMount

Component is mounted to a real DOM node and executes after the render method

This method is mostly used to perform some operations such as data acquisition, event monitoring, etc.

Update phase

The main functions of this stage are as follows:

GetDerivedStateFromProps

ShouldComponentUpdate

Render

GetSnapshotBeforeUpdate

ComponentDidUpdate

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, and returns true by default

Timing of execution: it is called when it comes to a new props or state, and tells the component whether it is updated or not by returning true or false

In general, it is not recommended to make a deep comparison in the periodic method, which will affect the efficiency.

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

Render

Introduction as above

GetSnapshotBeforeUpdate

The periodic function is executed after render, and the DOM element has not been updated at the time of execution

A snapshot value returned by this method, passed in as the third parameter of componentDidUpdate

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

The purpose of this method is to obtain some information before the component update, such as the scrolling position of the component, which can be used to restore some UI visual state after the component update.

ComponentDidUpdate

Timing of execution: triggered after the end of component update

In this method, corresponding operations can be done according to the changes of props and state, such as obtaining data, modifying DOM style, etc.

Unloading Pha

ComponentWillUnmount

This method is used to clean up some registered listening events or unsubscribe network requests before uninstalling the component.

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

These are all the contents of the article "what are the stages of the react life cycle?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.