![Taro多端开发权威指南:小程序、H5与App高效开发实战](https://wfqqreader-1252317822.image.myqcloud.com/cover/719/38209719/b_38209719.jpg)
2.3 组件生命周期
组件从创建到销毁所经历的整个过程是组件的一生——生命周期。人类从出生到死亡会经历很多人生阶段,Taro也为组件划分了不同阶段,方便开发者在组件的不同阶段执行不同操作。一般而言,组件生命周期大致分为3个阶段:挂载、更新、卸载。
与生命周期相关的方法如下:
· static
· constructor
· componentWillMount
· componentDidMount
· componentWillReceiveProps
· shouldComponentUpdate
· componentWillUpdate
· componentDidUpdate
· componentWillUnmount
· render
2.3.1 组件挂载
初次渲染时,需要将组件挂载至对应的DOM节点上,这个阶段主要经历了组件实例化、组件将要挂载、组件渲染、组件挂载完毕,对应的生命周期方法如下表所示。
![](https://epubservercos.yuewen.com/D79B16/20118172101010406/epubprivate/OEBPS/Images/40906_54_1.jpg?sign=1738851121-3lVARX2SrodtDaOWiYuNdFcBC1cbCWr1-0-b31739316295b66eb0ed7f0ccfba5682)
2.3.2 组件更新
组件被挂载到DOM以后,组件的props或state发生更改时会引起组件的更新,通常props变化是因外部变化引起的,state变化是因组件内部调用了setState引起的。这个阶段主要经历了组件接收props、组件是否需要更新、组件将要更新、组件渲染、组件更新完毕。对应的生命周期方法如下表所示。
![](https://epubservercos.yuewen.com/D79B16/20118172101010406/epubprivate/OEBPS/Images/40906_54_2.jpg?sign=1738851121-TQO6LHJO2Nf3okYfLwveLG0AVsqw7e9L-0-e6a92df244d0b6fb97f9747900e9e373)
续表
![](https://epubservercos.yuewen.com/D79B16/20118172101010406/epubprivate/OEBPS/Images/40906_55_1.jpg?sign=1738851121-1Z22FmireGB07HJswtr4XAPy0eEIT7Bi-0-f8aaa6ca75fb6b0e59c029167befc094)
2.3.3 组件卸载
这个阶段只有一个生命周期方法——componentWillUnmout,却也是很多人会选择忽略的一个方法。有时组件被卸载后,组件相关的内容并没有被清除“干净”,例如组件中定义的定时器,需要在组件卸载时被清除。在2.2节关于组件状态的讲解中,定义了一个随时间变化的数字显示组件,定时器在组件挂载阶段被定义,而组件卸载时并没有清除这个定时器,我们对这部分代码进行优化:
![](https://epubservercos.yuewen.com/D79B16/20118172101010406/epubprivate/OEBPS/Images/40906_55_2.jpg?sign=1738851121-BS9nyaH7BGkdxT3LFqeagZ3bQYLGvngT-0-f46d6d132a1690a8501b1c7f681edfa9)
![](https://epubservercos.yuewen.com/D79B16/20118172101010406/epubprivate/OEBPS/Images/40906_56_1.jpg?sign=1738851121-sUebAMT8v3JmPGF92nnfws0J1zy1ZHux-0-5900fbfb6d8a10ba20b832e8c9a126f9)
对于初学者,类组件的生命周期概念晦涩难懂,甚至会出现错用、滥用的情况。庆幸的是,函数组件不存在上面列举的烦琐生命周期方法,函数组件的生命周期可使用Hooks实现。