生命周期

Mounting

These methods are called in the following order when an instance of a component is being created and inserted into the DOM:

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

Note:

These methods are considered legacy and you should avoid them in new code:

• UNSAFE_componentWillMount()

Updating

An update can be caused by changes to props or state. These methods are called in the following order when a component is being re-rendered:

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

Note:

These methods are considered legacy and you should avoid them in new code:

• UNSAFE_componentWillUpdate()
• UNSAFE_componentWillReceiveProps()

Unmounting

This method is called when a component is being removed from the DOM:

• componentWillUnmount()

Error Handling

These methods are called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component.

• static getDerivedStateFromError()
• componentDidCatch()

References

• React.Component
• 前端面试宝典之 React 篇 - 如何避免生命周期中的坑？