生命周期圖解
到目前為止我們只學(xué)習(xí)了一種方法來(lái)更新UI。我們調(diào)用?ReactDOM.render()?方法來(lái)改變輸出：
使Clock組件真正柯林斯重用封裝狀語(yǔ)從句：。它將設(shè)置自己的計(jì)時(shí)器，并每秒鐘更新一次。
封裝時(shí)鐘：
Clock設(shè)置一個(gè)定時(shí)器并且每秒更新UI應(yīng)該是Clock的實(shí)現(xiàn)細(xì)節(jié)。
理想情況下，我們寫一次?Clock?然后它能更新自身：?
ReactDOM.render(
? ? ? ? ? ? <Clock />,
? ? ? ? ? ? document.getElementById('root')
? ? ? ? ? );
為了實(shí)現(xiàn)這個(gè)需求，我們需要為Clock組件添加”狀態(tài)(state)”
狀態(tài)與屬性十分相似，但是狀態(tài)是私有的，完全受控于當(dāng)前組件。
將函數(shù)轉(zhuǎn)換為類
通過(guò)5個(gè)步驟將函數(shù)組件?Clock?轉(zhuǎn)換為類
1、創(chuàng)建一個(gè)名稱擴(kuò)展為?React.Component?的ES6 類
2、創(chuàng)建一個(gè)叫做render()的空方法
3、將函數(shù)體移動(dòng)到?render()?方法中
4、在?render()?方法中，使用?this.props?替換?props
5、刪除剩余的空函數(shù)聲明?
Clock?現(xiàn)在被定義為一個(gè)類而不只是一個(gè)函數(shù)
使用類就允許我們使用其它特性，例如局部狀態(tài)、生命周期鉤子
為一個(gè)類添加局部狀態(tài)
通過(guò)3個(gè)步驟將?date?從屬性移動(dòng)到狀態(tài)中：
1、在?render()?方法中使用?this.state.date?替代?this.props.date
2、添加一個(gè)類構(gòu)造函數(shù)來(lái)初始化狀態(tài)?this.state
注意我們?nèi)绾蝹鬟f?props?到基礎(chǔ)構(gòu)造函數(shù)的：
