React lifecycle

Time:2021-11-25

React lifecycle (old)

The react legacy lifecycle consists of three processes:

1. Mount process
constructor()
componentWillMount()
componentDidMount()

2. Update process
componentWillReceiveProps(nextProps)
shouldComponentUpdate(nextProps,nextState)
componentWillUpdate (nextProps,nextState)
render()
componentDidUpdate(prevProps,prevState)

3. Unloading process
componentWillUnmount()

Its specific functions are as follows:
1、constructor()
Complete the initialization of react data.

2、componentWillMount()
The logic executed when the component has finished initializing data but has not yet rendered the DOM is mainly used for server-side rendering.

3、componentDidMount()
The logic executed when the component finishes rendering for the first time. At this time, the DOM node has been generated.

4、componentWillReceiveProps(nextProps)
When receiving new props from the parent component, re render the logic executed by the component.

5、shouldComponentUpdate(nextProps, nextState)
After setstate, the state changes, and the component will enter the logic executed when re rendering. In this life cycle, return false can prevent component updates. It is mainly used for performance optimization.

6、componentWillUpdate(nextProps, nextState)
After shouldcomponentupdate returns true, the logic executed when the component enters the re rendering process.

7、render()
The render function compiles JSX into a function and generates a virtual DOM, then compares the old and new DOM trees before and after the update through its diff algorithm, and renders the changed nodes.

8、componentDidUpdate(prevProps, prevState)
The logic executed after re rendering.

9、componentWillUnmount()
The logic executed before uninstalling the component, such as “clear all timeouts, setintervals and other timers in the component” or “remove listeners in all components removeeventlistener”.

React lifecycle (New)

After react16.4, a new life cycle is used, and getderivedstatefromprops is used to replace the old componentwillreceiveprops and componentwillmount. The old componentwillupdate was replaced with getsnapshotbeforeupdate.

Reasons for using getderivedstatefromprops (nextprops, prevstate):
The componentwillreceiveprops method in the old react is used to judge whether the two props are the same. If they are different, update the new props to the corresponding state. In this process, we can actually access the current props, so we may do some strange operations on this.props, which may destroy the single data source of state data and make the component state unpredictable.

In getderivedstatefromprops, the component is prohibited from accessing this.props, and the developer is forced to compare the values in nextprops and prevstate to ensure that when the developer uses the life cycle function getderivedstatefromprops, he is updating the state of the component according to the current props, Instead of accessing this. Props and doing other things that make the state of the component itself more unpredictable.

Reasons for using getsnapshotbeforeupdate (prevprops, prevstate):
After the asynchronous rendering mode is enabled by react, the DOM element state read during function execution is not always the same as that during rendering, which makes it unsafe to use the DOM element state read in componentwillupdate in componentdidupdate, because the value at this time is likely to have expired.

Getsnapshotbeforeupdate will be called before the final render, that is, the DOM element state read in getsnapshotbeforeupdate can be guaranteed to be consistent with that in componentdidupdate.