4.6 在時鐘組件類中引入State狀態

在這一節中，我們開始正式引入React狀態（State）的概念。前面做了那么多的代碼鋪墊，就是為了在這里引入State狀態的概念時能夠水到渠成，因為React State是其他大部分JavaScript前端框架中所沒有的概念。

為了便于讀者學習，我們就以【代碼4-11】為代碼藍本，通過代碼改寫的方式進行介紹。另外，改寫的方式可以參考本章第1小節中介紹的內容。

首先，我們需要將“props”參數替換為“state”屬性，具體代碼形式如下：

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

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

●第06行代碼中，使用“state”狀態替換了原來的“props”參數。

接著，需要為時鐘組件類（ClockReactComp）添加constructor()構造方法，并且對“state”狀態進行初始化，具體代碼形式如下：

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

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

●第02~04行代碼定義的就是時鐘組件類（ClockReactComp）的constructor()構造方法。其中，第03行代碼對“state”狀態進行了初始化操作，定義了一個date時間屬性。

然后，將“props”參數傳遞到父類的構造方法之中，具體的代碼形式如下：

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

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

●在第03行代碼中，通過super關鍵字調用“props”參數，實現將“props”參數傳遞到父類構造方法的操作。

至此，在時鐘組件類（ClockReactComp）中引入React State狀態的操作就基本完成了，完整的代碼形式如下：

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

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

●在第33行代碼中，通過調用ReactDOM的render()方法，實現將時鐘組件類（ClockReactComp()）渲染到頁面中進行顯示的操作。另外請注意，我們在<ClockReactComp />元素中移除了date屬性。

測試網頁的效果如圖4.4所示。通過在時鐘組件類（ClockReactComp()）中引入State狀態，也可以實現同樣的頁面顯示效果。正如圖中標識所寫內容那樣，這個時鐘組件類是無法自我更新的。難道還是要繼續通過計時器功能，才可以實現自我更新的時鐘組件類么？我們在下一小節中給出答案。