The corresponding hooks triggered when React is in three states

01. Initialization state.

This phase is triggered by the render() function;

1.constructor();

2.componentWillMount();

Changed to UNSAFE_componentWillMount() after version 17

reason: react prepares for component asynchronous rendering;

3.render();

4.componentDidMount();

This hook is commonly used; generally do some initialization in this component, use the start timer to initiate a network request, please read the message. (If you have learned vue, you can compare the created() hook and mounted() hook)

02. Update stage;

Triggered by internal component setState() or parent component render;

1.shouldComponentUpdate();

2.componentWillUpdate();

Change to UNSAFE_componentWillUpdate() after version 17;

reason: react prepares for component asynchronous rendering;

3.render();

This is the most commonly used hook for rendering;

4.componentDidUpdate();

5.componentWillReceiveProps();

Changed to UNSAFE_componentWillReceiveProps() after version 17;

reason: react prepares for component asynchronous rendering;

03. Unloading stage;

Triggered by ReactDom.unmountComponentAtNode();

1.ComponentWillUnmount()        

This hook is also commonly used; generally do some finishing things in this component, use the start timer to initiate a network request, please read the message. (If you have learned vue, you can check the two hooks beforeDestroy() and destroyed())