I. Overview
Donovon has created this nice flowchart that explains the new lifecycle of a Hooks component.
Comes in handy
https://www.bram.us/2019/03/11/react-hook-flow-diagram/
Second, the supplement
Tip : Use multiple Effect achieve separation of concerns
Use Hook One aim is to solve the class life cycle functions often include unrelated logic, but the problem is related to several different methods to separate the logic in again.
React stated in the order effect in turn call the components of each effect.
React when Clear Effect ? React will perform cleanup operations at the time of the components to uninstall. As previously learned, effect will be executed every time when rendering. This is why React to be cleared before executing effect on a current effect.
Third, the life cycle description:
1, Mount phases:
1) initialization userState and userReducer state
2) sequentially performed Hooks layout and side effects;
2, Update phases:
effect will be executed every time when rendering, so to clear the side effects have not been done before;
Otherwise it will lead to the implementation of Mansian;
3, UnMount stage
Cleaning side effects;