3.3 React類組件

本節(jié)接著介紹如何通過ES6 Class（類）形式實(shí)現(xiàn)一個React類組件。下面看一個具體的代碼實(shí)例：

【代碼3-4】（詳見源代碼目錄ch03-react-comp-class.html文件）

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

●第18~22行代碼定義了一個ES6 Class類（HelloReactComp），這個類就是我們要實(shí)現(xiàn)的React類組件，具體說明如下：

? 第18行代碼通過class關(guān)鍵字定義了類名（HelloReactComp），并通過extends關(guān)鍵字聲明該類繼承自React.Component對象。

? 第19~21行代碼通過React.Component對象的render()方法實(shí)現(xiàn)React類組件的渲染操作，具體渲染內(nèi)容是第20行代碼返回的JSX代碼。

●第24行代碼中，通過const關(guān)鍵字定義了一個常量（eleHello），然后將ES6 Class類（HelloReactComp）的類名（HelloReactComp）使用尖括號“<>”包括起來，賦值給常量（eleHello），類似于將類名（HelloReactComp）作為標(biāo)簽名來使用。通過以上步驟的定義，ES6 Class類（HelloReactComp()）就成為React類組件（<HelloReactComp>）。

●第29行代碼中，通過將常量（eleHello）放入JSX代碼（{eleHello}）來實(shí)現(xiàn)React類組件的應(yīng)用。

測試網(wǎng)頁的效果如圖3.2所示。

如圖3.2中的箭頭所示，頁面中顯示了通過React類組件渲染的效果，從效果來看與React函數(shù)組件功能相同。

另外注意一點(diǎn)，React組件的名稱首字母必須是大寫的。例如，<HelloReactComp>是正確的，而<helloReactComp>就是非法的。這個規(guī)定主要是為了與原生HTML標(biāo)簽名稱相區(qū)別，因為原生HTML標(biāo)簽名稱均是小寫字母開頭的。