What is the difference between the old and new life cycles of react

The difference between the old and new life cycles of react: 1. Three will hooks have been removed from the new life cycle, namely componentWillMount, componentWillReceiveProps, and componentWillUpdate; 2. Two new hooks have been added to the new life cycle, namely getDerivedStateFromProps. (Get state derived from props) and getSnapshotBeforeUpdate.

#The operating environment of this tutorial: Windows7 system, react18 version, Dell G3 computer.

React has two sets of life cycles before and after version 16.3. Before 16.3, it was the old version, and after that, it was the new version. Although there are differences between the old and new versions, they are basically the same.

React life cycle (old)

##It is worth emphasizing:

componentWillReceivePropsThe function will not be called when props are passed in for the first time. It will be called only afterthe second time (including the second time)when props are passed in

shouldComponentUpdateLike a valve, a return value (true or false) is needed to determine whether the status of this update needs to be re-rendered

##React life cycle (new)

The difference between the old and new life cycles of reactNew life cycle

Remove

Three will hooks are added, namely:componentWillMount, componentWillReceiveProps, componentWillUpdateThe new life cycle adds two new hooks, namely:

1,

getDerivedStateFromProps

: Get derived state from props

Accepts two parameters: props, state
Returns a state object Or null, used to modify the value of state.
Usage scenarios: If the value of state depends on props at any time, you can use getDerivedStateFromProps
2,

getSnapshotBeforeUpdate

: Get the snapshot before the update (you can get the data before the update)Call before updating the DOM

Returns an object or null, and the return value is passed to componentDidUpdate

componentDidUpdate(): Called after updating the DOM

Accepts three parameters: preProps, preState, snapshotValue

• 
  

Use case:For a fixed-height p, add a new row regularly, so that when adding a new row, the height of the currently viewed row remains unchanged.

Note:

In React v16.3, new life cycle changes are ushered in. The old life cycle is also used, but a deprecation warning can be seen on the console. It also reminds that three life cycle hooks will be deprecated, so try not to use them. Or you can add the prefix

UNSAFE_

in front of it.[Related recommendations:

Redis video tutorial

]

The above is the detailed content of What is the difference between the old and new life cycles of react. For more information, please follow other related articles on the PHP Chinese website!