1.5 深入理解React的渲染流程

1.5.1 生命周期流程

自函数组件有了Hooks以来，一些开发者在理解Hooks时总是带上类组件的生命周期，实际上两者的生命周期完全不同。类组件的生命周期流程如图1-1所示。

父组件重新渲染，调用this.setState（）、调用this.forceUpdate（）以及订阅的Context的value发生变更都会导致类组件更新。

函数组件的生命周期流程如图1-2所示。

装载时运行的惰性初始化程序指传递给useState和useReducer的函数。父组件重新渲染、状态发生变更以及订阅的Context的value发生变更都会导致函数组件更新。由图1-2可知，上一次的effect会在组件更新后被清理，清理effect和运行effect都不会阻塞浏览器绘制。

图1-1 类组件的生命周期流程

（此图源于https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/）

图1-2 函数组件的生命周期流程