4.8 在時(shí)鐘組件類(lèi)中使用生命周期

在這一節(jié)中，我們通過(guò)引入React生命周期的概念，配合State狀態(tài)來(lái)實(shí)現(xiàn)最終版本的React時(shí)鐘組件。

我們繼續(xù)以【代碼4-15】為基礎(chǔ)，通過(guò)引入相關(guān)生命周期方法來(lái)實(shí)現(xiàn)能夠自我更新的時(shí)鐘組件類(lèi)，具體代碼如下：

【代碼4-17】（詳見(jiàn)源代碼目錄ch04-react-state-clock-lifecycle.html文件）

關(guān)于【代碼4-17】的說(shuō)明：

●在第25~30行代碼中引入了componentDidMount()方法，該方法會(huì)在組件已經(jīng)被渲染到DOM中后被觸發(fā)，可以在該方法中設(shè)置一個(gè)計(jì)時(shí)器，來(lái)實(shí)現(xiàn)時(shí)鐘組件類(lèi)的自我更新功能。其中，第26~29行代碼通過(guò)使用setInterval()定義了一個(gè)計(jì)時(shí)器（this.timerId），并通過(guò)該定時(shí)器定時(shí)調(diào)用第27行代碼所定義的箭頭函數(shù)方法（tick()）。

●第35~39行代碼是自定義方法（tick()）的實(shí)現(xiàn)過(guò)程，主要是通過(guò)this.setState()方法來(lái)更新組件的State狀態(tài)。其中，第37行代碼通過(guò)更新date屬性實(shí)現(xiàn)了時(shí)鐘組件類(lèi)的自我更新。

●在第31~33行代碼中引入了componentWillUnmount()方法，該方法會(huì)在組件已經(jīng)被從DOM中清除后被觸發(fā)。其中，第32行代碼通過(guò)使用clearInterval()清除了計(jì)時(shí)器（this.timerId）。

測(cè)試網(wǎng)頁(yè)的效果如圖4.5所示。通過(guò)在時(shí)鐘組件類(lèi)（ClockReactComp()）中定義State狀態(tài)和使用生命周期方法調(diào)用定時(shí)器，同樣實(shí)現(xiàn)了的自我更新的時(shí)鐘UI效果。同時(shí)，該時(shí)鐘組件類(lèi)（ClockReactComp()）通過(guò)結(jié)合State狀態(tài)和使用生命周期方法，完全實(shí)現(xiàn)了一個(gè)結(jié)構(gòu)清晰、可封裝和可重復(fù)使用的時(shí)鐘組件。