Hi, I am Zhao Meng. Today I will sort out some notes from my React learning.
I. Overview
- Significance: The life cycle of a component helps to understand how the component runs, complete more complex component functions, analyze the causes of component errors, etc.
- The life cycle of a component: the process from when a component is created to when it is mounted and run on the page, to when it is uninstalled when not in use
- The role of the hook function: provides opportunities for developers to operate components at different stages
2. Overall description of the life cycle
Mounting phase
Execution timing: when the component is created (when the page is loaded)
Execution order:
| hook function | Trigger time | effect |
|---|---|---|
| constructor | When creating a component, execute it first | 1. Initialize state 2. Create Ref, etc. |
| render | Triggered every time the component is rendered | Render UI (Note: setState() cannot be called |
| componentDidMount | After the component is mounted (DOM rendering completed) | 1.Send network request 2.DOM operation |
update stage
- Execution timing: 1.setState() 2.forceUpdate() 3. The component receives new props
- Note: If any of the above three changes, the component will be re-rendered.
- Execution order
| 钩子函数 | 触发时机 | 作用 |
|---|---|---|
| render | 每次组件渲染都会触发 | Render UI (the same render as the mount stage |
| componentDidUpdate | After the component is updated (DOM rendering completed) | DOM operations can obtain the updated DOM |
Unloading phase
- Execution timing: The component disappears from the page
| 钩子函数 | 触发时机 | 作用 |
|---|---|---|
| componentWillUnmount | Component uninstalls (disappears from page) | Perform cleanup work (such as: cleanup timer, etc.) |