1. What is it#
The concept of the lifecycle is widely used, especially in many fields such as economy, environment, technology, and society. Its basic meaning can be understood as the entire process from cradle to grave.
Like Vue, the entire component lifecycle of React includes a series of processes from creation, data initialization, template compilation, mounting DOM → rendering, updating → rendering, and unmounting.
2. Process#
Here mainly describes the lifecycle after react16.4, which can be divided into three stages:
- Creation stage
- Update stage
- Unmounting stage
Creation stage#
The creation stage is mainly divided into the following lifecycle methods:
- constructor
- getDerivedStateFromProps
- render
- componentDidMount
constructor#
A method that is automatically called during the instance process, and uses the super keyword to obtain props from the parent component.
In this method, the usual operation is to initialize the state state or mount methods on this.
getDerivedStateFromProps#
This method is a newly added lifecycle method and is a static method, so it cannot access the instance of the component.
Execution timing: Component creation and update stages, whether it is a props change or a state change, will also be called.
It is called before each render method, the first parameter is the upcoming props, and the second parameter is the previous state state. You can compare props and state to add some limiting conditions to prevent unnecessary state updates.
This method needs to return a new object as the new state or return null to indicate that the state does not need to be updated.
render#
A method that must be implemented by class components to render the DOM structure and access component state and prop properties.
Note: Do not setState inside render, otherwise it will trigger an infinite loop and cause memory crashes.
componentDidMount#
Executed after the component is mounted to the real DOM node, it is executed after the render method.
This method is mostly used to perform data acquisition, event listening, and other operations.
Update stage#
The functions of this stage are mainly as follows:
- getDerivedStateFromProps
- shouldComponentUpdate
- render
- getSnapshotBeforeUpdate
- componentDidUpdate
getDerivedStateFromProps#
The introduction of this method is the same as above.
shouldComponentUpdate#
Used to inform the component whether it needs to be re-rendered based on the current props and state. By default, it returns true.
Execution timing: It will be called when there are new props or state, and it informs the component whether to update by returning true or false.
In general, it is not recommended to perform deep comparison in this lifecycle method, as it will affect efficiency.
At the same time, setState cannot be called, otherwise it will cause an infinite loop of updates.
render#
Introduction same as above.
getSnapshotBeforeUpdate#
This lifecycle function is executed after render, and at this time the DOM elements have not been updated.
The method returns a Snapshot value, which is passed as the third parameter to 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 is updated, such as the scrolling position of the component, and based on this information, some UI visual states can be restored after the component is updated.
componentDidUpdate#
Execution timing: Triggered after the component update is completed.
In this method, you can perform corresponding operations based on the changes of props and state, such as data acquisition, modifying DOM styles, etc.
Unmounting stage#
componentWillUnmount#
This method is used to clean up some registered event listeners or cancel subscriptions to network requests before the component is unmounted.
Once a component instance is unmounted, it will not be mounted again, but it may only be recreated.
3. Summary#
The overall process of the new version lifecycle is shown in the following diagram:
The old lifecycle process diagram is as follows:
By comparing the two diagrams, it can be found that the new version of the lifecycle has reduced the following three methods:
- componentWillMount
- componentWillReceiveProps
- componentWillUpdate
In fact, these three methods still exist, but the former is prefixed with UNSAFE_, such as UNSAFE_componentWillMount, which does not mean unsafe, but means that the code of these lifecycles may be deprecated in future versions of React.
At the same time, two new lifecycle functions have been added:
- getDerivedStateFromProps
- getSnapshotBeforeUpdate