4.5 自我更新的時鐘UI類

在前一節中，我們實現了可封裝的React時鐘UI的自動更新，主要是通過定時器功能實現的。不過，對于完美主義者還是不夠理想，與React框架的設計理念也有很大的差距。

我們理想的形式是僅僅定義一個時鐘組件，該時鐘組件可以自我更新，將其渲染到頁面中就是一個真正的時鐘UI。因此，具體的代碼形式大致如下：

【代碼4-8】

關于【代碼4-8】的說明：

●第04行代碼定義的<Clock />就是我們想要的、可封裝、可重用的時鐘組件。這個時鐘組件在渲染到頁面中之后，是完全可以自我更新的。

為了實現這個可自我更新的時鐘UI，我們需要將函數組件轉換為ES6類組件，這個類組件具有自我更新的功能。

（1）需要創建一個ES6組件類，并且繼承于React.Component，具體的代碼形式如下：

【代碼4-9】

關于【代碼4-9】的說明：

●第02行代碼，定義的時鐘組件類（ClockReactComp）。

●第04行代碼，通過render()方法將時鐘組件類（ClockReactComp）渲染到頁面中進行顯示。

（2）在剛剛創建的時鐘組件類（ClockReactComp）中定義render()方法，并將之前時鐘函數組件的內容加進去，具體的代碼形式如下：

【代碼4-10】

關于【代碼4-10】的說明：

●第03~10行代碼，通過render()方法定義的、所渲染的時鐘函數組件的內容。

●另外，由于在ES6組件類中無法顯式地定義Props參數，需要在props參數前使用this關鍵字引用。

（3）到這步為止，一個可自我更新的時鐘組件類（ClockReactComp）的雛形就基本完成了，然后借助【代碼4-7】的機制通過定時器來實現時鐘的自我更新，完整的代碼形式如下：

【代碼4-11】（詳見源代碼目錄ch04-react-state-clock-class.html文件）

關于【代碼4-11】的說明：

●第29~34行代碼是autoClock()函數的實現過程，通過調用時鐘組件類（ClockReactComp()）來顯示頁面時鐘，并借助Props參數來傳遞時間。

●在第36行代碼中，通過定義計時器來實現時鐘組件類（ClockReactComp()）的自我更新。

測試網頁的效果如圖4.3所示。如圖中的箭頭所示，通過可自我更新的時鐘組件類也可以實現同樣的效果。同時，關鍵的地方是【代碼4-11】通過ES6 Class形式定義的時鐘組件，更接近我們理想中的React時鐘組件了。