3.2 React函數組件

本節先介紹如何通過JavaScript函數形式實現一個React函數組件。下面看一個具體的代碼實例：

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

關于【代碼3-3】的說明：

●第18~20行代碼定義了一個JavaScript函數（HelloReactComp()），該函數就是我們要實現的React函數組件，具體說明如下：

? 第19行代碼通過return語句返回了一行JSX代碼，該行代碼通過<p>標簽元素定義了一行段落文本。

●關鍵看第22行代碼，通過const關鍵字定義了一個常量（eleHello），然后將JavaScript函數（HelloReactComp()）的名稱（HelloReactComp）使用尖括號“<>”包括進去，賦值給常量（eleHello），相當于將函數名稱（HelloReactComp）作為標簽名來使用。通過以上步驟的定義，JavaScript函數（HelloReactComp()）就成為了一個React函數組件（<HelloReactComp>）。

●第27行代碼通過常量（eleHello）放入JSX代碼（{eleHello}）來實現React函數組件的應用。

測試網頁的效果如圖3.1所示。

如圖3.1中箭頭所示，頁面中顯示了通過React函數組件渲染的效果，從效果來看與JSX代碼一致。

盡管React組件與JSX代碼實現的功能基本一致，但從設計角度上講還是推薦使用React組件方式。原因是：將React組件與Props結合使用可以實現更靈活的功能，關于Props的內容會在本章后續內容中詳細介紹。