1.5 深入理解React的渲染流程

1.5.1 生命周期流程

自函數(shù)組件有了Hooks以來(lái)，一些開(kāi)發(fā)者在理解Hooks時(shí)總是帶上類(lèi)組件的生命周期，實(shí)際上兩者的生命周期完全不同。類(lèi)組件的生命周期流程如圖1-1所示。

父組件重新渲染，調(diào)用this.setState（）、調(diào)用this.forceUpdate（）以及訂閱的Context的value發(fā)生變更都會(huì)導(dǎo)致類(lèi)組件更新。

函數(shù)組件的生命周期流程如圖1-2所示。

裝載時(shí)運(yùn)行的惰性初始化程序指?jìng)鬟f給useState和useReducer的函數(shù)。父組件重新渲染、狀態(tài)發(fā)生變更以及訂閱的Context的value發(fā)生變更都會(huì)導(dǎo)致函數(shù)組件更新。由圖1-2可知，上一次的effect會(huì)在組件更新后被清理，清理effect和運(yùn)行effect都不會(huì)阻塞瀏覽器繪制。

圖1-1 類(lèi)組件的生命周期流程

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

圖1-2 函數(shù)組件的生命周期流程