1. React16 deprecated componentWillMount, componentWillReceivePorps, new life cycle componentWillUpdate
2. New getDerivedStateFromProps, getSnapshotBeforeUpdate three hooks to replace the deprecated functions (componentWillMount, componentWillReceivePorps, ComponentWillUpdate)
3.React16 does not remove the three hook functions, but they cannot be mixed with the two new hook functions (getDerivedStateFromProps and getSnapshotBeforeUpdate).
Note: React17 will delete componentWillMount, componentWillReceivePorps componentWillUpdate
4.React16 added a hook function for error handling (componentDidCatch)
1. React old version life cycle
1. The child conponent is mounted for the first time
Which in turn triggers the Child component:
constructor,
componentWillMount,
render,
ComponentDidMount.
2. The child component props has changed
(1) shouldComponentUpdate returns true
In order to call the Child component:
componentWillReceiveProps,
shouldComponentUpdate,
componentWillUpdate,
render,
ComponentDidUpdate.
(2) shouldComponentUpdate returns false
Only Child component is called:
componentWillReceiveProps,
ShouldComponentUpdate.
3. The state of the child component changes
In order to call the Child component:
shouldComponentUpdate,
componentWillUpdate,
render,
ComponentDidUpdate.
Compared with 2, 3 missing componentWillReceiveProps, this is because the componentWillReceiveProps component receives a new props will be invoked when the (note: this method apply colours to a drawing for the first time will not be called).
React16 life cycle
The child Component is mounted for the first time
Which in turn triggers the Child component:
constructor,
getDerivedStateFromProps,
render,
ComponentDidMount.
2. The child component props has changed
(1) shouldComponentUpdate returns true
In order to call the Child component:
getDerivedStateFromProps,
shouldComponentUpdate,
render,
getSnapshotBeforeUpdate,
ComponentDidUpdate.
(2) shouldComponentUpdate returns false
Only Child component is called:
getDerivedStateFromProps,
ShouldComponentUpdate.
3. The state of the child component changes
(1) shouldComponentUpdate returns true
In order to call the Child component:
getDerivedStateFromProps,
shouldComponentUpdate,
render,
getSnapshotBeforeUpdate,
ComponentDidUpdate.
(2) shouldComponentUpdate returns false
In order to call the Child component:
getDerivedStateFromProps,
ShouldComponentUpdate.
This is the same as when changing the props of a child Component in 2.