– The first version 15 lifecycle has

Initialization phase

Component Will Mount the render component before initialization. Component Did Mount the component after it is mounted to the DOMCopy the code

Update the stage

When state and props are changed

State Go State go ==>>> > Should Component Update Whether the Component needs to be updated? ==>>> > Component Will Update ==>>> > Component Did Update ==>>> > Component Did UpdateCopy the code

/ / props

Component Will Receive props is called before the component is going to Receive new props

==>>> > Should Component Update whether to Update the Component? ==>>> > Component Will Update ==>>> > Component Did Update ==>>> > Component Did UpdateCopy the code

Unloading phase

Component Will Unmount Called before component UnmountCopy the code

React16 new life cycle deprecated

= = > > > componentWillMount = = > > > componentWillReceivePorps = = > > > componentWillUpdate = = > > > new = = > > > getDerivedStateFromProps ==>>> >getSnapshotBeforeUpdate instead of the three deprecated hook functions. ==>>>React16 does not remove the three hook functions, but cannot mix them with the new hook functions. ==>>> >React17 will remove the three hook functions ==>>> > -getDerivedStateFromProps: Each time the component is rerender, it returns an object as the new props after receiving a new prop. Returning null means no new state is needed. Cooperate componentDidUpdate, can cover all usage - getSnapshotBeforeUpdate componentWillReceiveProps: trigger time: the update happens, after the render before component dom rendering; Returns a value as the third argument to componentDidUpdate; With componentDidUpdate, you can override all usage of componentWillUpdateCopy the code