- Taro多端開發權威指南:小程序、H5與App高效開發實戰
- 李佩忠編著
- 596字
- 2021-05-19 18:01:17
2.3 組件生命周期
組件從創建到銷毀所經歷的整個過程是組件的一生——生命周期。人類從出生到死亡會經歷很多人生階段,Taro也為組件劃分了不同階段,方便開發者在組件的不同階段執行不同操作。一般而言,組件生命周期大致分為3個階段:掛載、更新、卸載。
與生命周期相關的方法如下:
· static
· constructor
· componentWillMount
· componentDidMount
· componentWillReceiveProps
· shouldComponentUpdate
· componentWillUpdate
· componentDidUpdate
· componentWillUnmount
· render
2.3.1 組件掛載
初次渲染時,需要將組件掛載至對應的DOM節點上,這個階段主要經歷了組件實例化、組件將要掛載、組件渲染、組件掛載完畢,對應的生命周期方法如下表所示。

2.3.2 組件更新
組件被掛載到DOM以后,組件的props或state發生更改時會引起組件的更新,通常props變化是因外部變化引起的,state變化是因組件內部調用了setState引起的。這個階段主要經歷了組件接收props、組件是否需要更新、組件將要更新、組件渲染、組件更新完畢。對應的生命周期方法如下表所示。

續表

2.3.3 組件卸載
這個階段只有一個生命周期方法——componentWillUnmout,卻也是很多人會選擇忽略的一個方法。有時組件被卸載后,組件相關的內容并沒有被清除“干凈”,例如組件中定義的定時器,需要在組件卸載時被清除。在2.2節關于組件狀態的講解中,定義了一個隨時間變化的數字顯示組件,定時器在組件掛載階段被定義,而組件卸載時并沒有清除這個定時器,我們對這部分代碼進行優化:


對于初學者,類組件的生命周期概念晦澀難懂,甚至會出現錯用、濫用的情況。慶幸的是,函數組件不存在上面列舉的煩瑣生命周期方法,函數組件的生命周期可使用Hooks實現。