4.1 React State介紹

在React框架中定義了一個狀態(tài)（State）概念，并通過狀態(tài)（State）來實(shí)現(xiàn)React組件的狀態(tài)機(jī)特性。所謂React組件的“狀態(tài)機(jī)”特性，就是指組件通過與用戶的交互，實(shí)現(xiàn)不同的狀態(tài)，然后通過渲染UI保證用戶界面和數(shù)據(jù)一致性。

React框架之所以定義這個狀態(tài)（State）概念，其目的就是僅僅通過更新React組件的狀態(tài)（State），就可以實(shí)現(xiàn)重新渲染用戶界面的操作（這樣就不需要操作DOM了）。這點(diǎn)也正是React設(shè)計理念相較于其他前端框架的先進(jìn)之處。

React State的使用方法相比于Props較為復(fù)雜一些，但也是有基本模式的，下面就詳細(xì)介紹一下。

首先，先要創(chuàng)建一個ES6形式的React組件（Component）類，這方面內(nèi)容在前文中有過詳細(xì)的介紹，具體代碼如下：

【代碼4-1】

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

●在React組件類內(nèi)部，要定義constructor()構(gòu)造方法（見第03行代碼），以及render()方法（見第05~07行代碼）。

然后，在render()方法中通過“this.state”來使用React狀態(tài)（State），具體的代碼形式如下：

【代碼4-2】

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

●第08行代碼中，通過“this.state”來使用React狀態(tài)（State）。

這里，React狀態(tài)（State）的初始化工作如何實(shí)現(xiàn)呢？這個工作需要放在React組件類的constructor()構(gòu)造方法中，具體的代碼形式如下：

【代碼4-3】

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

●第04行代碼中，就是“this.state”的初始化方式。其中，“params”表示屬性名稱，“value”為初始化的屬性值，同時可以定義若干組。

最后，還需要考慮將Props參數(shù)添加到構(gòu)造方法中，具體的代碼形式如下：

【代碼4-4】

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

●第03行代碼，在constructor()構(gòu)造方法中定義props參數(shù)。

●第04行代碼，通過super關(guān)鍵字調(diào)用props參數(shù)，實(shí)現(xiàn)對父類構(gòu)造方法的引用。這里的super關(guān)鍵字屬于JavaScript語法范疇了。

通過以上幾個基本步驟，就實(shí)現(xiàn)了React State的定義與使用，當(dāng)然在實(shí)際應(yīng)用中是很靈活的，需要多加練習(xí)才可以慢慢掌握。在下面的幾個小節(jié)中，我們通過實(shí)現(xiàn)一個可封裝重用的React State時鐘應(yīng)用來詳細(xì)介紹React狀態(tài)（State）的使用方法。