4.3 開始封裝時鐘UI

首先，我們就從封裝React State時鐘的UI開始，當然目前僅僅就是一個靜態的時鐘UI，具體代碼如下：

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

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

●核心代碼是第18~20行代碼定義的函數組件（ClockReactComp()），實現了一個可封裝的時鐘UI。目前，這個時鐘UI是個靜態組件，是無法自動更新的。

測試網頁的效果如圖4.1所示。如圖中的箭頭所示，頁面中顯示出了React時鐘UI的樣式，當然目前這個時鐘是靜態無法自動更新的。

圖4.1 React時鐘UI