React – 組件：函數組件

• 2019 年 11 月 26 日
• 筆記

目錄：

1. 組件名字首字母一定是大寫的 2. 返回一個jsx 3. jsx依賴React，所以組件內部需要引入React 4. 組件傳參 a. 傳遞. <Component list={ arrData }><Component> b. 接收. function Component( props ){…} c. 使用. const { list } = props，list就是參數數據 5. 缺點：【無狀態組件】只能實現很簡單的視圖展示功能，沒有自己的內容數據、沒有狀態，沒有邏輯處理，【沒有this】，【沒有生命周期】。 6. 16.7以後版本的react有狀態和鉤子函數提供使用。不過版本過新不推薦用 內部不用render函數，會自動把return返回結果當做render返回結果【見類組件的必須要求】

js文件中的函數組件：

首字母大寫、有返回jsx的函數組件

也可以直接調用函數，實現函數組件引用。

函數組件里可以返回一個字元串：

但是沒有返回值就會報錯：

組件之間寫內容不會展示出來：

組件身上寫className沒用：

渲染的結果如下：沒有組件中的內容，也沒有class類名

獨立寫在js里的函數組件：

必須引入React才能使用、導出函數本身。程式碼如下

組件傳參：

傳入 – 屬性傳參

<HotList listData={ data } testData={ data2 }></HotList>

接收 – 參數接收 function HotList(props){ 　　console.log(props) }

傳入1個參數時，props列印

傳入2個參數時，props列印

可見傳入的所有參數都集合在函數的props參數中，解構出來即可引用。

引用 – 解構或直接引用

直接使用 console.log(props) console.log(props.testData)

解構使用：

函數組件的缺點：

無狀態組件 函數組件只能實現非常簡單的渲染功能。只是進行頁面的展示和數據的渲染。沒有邏輯的處理。也就是組件的內部是沒有自己的數據和狀態的。它是無狀態組件。 無狀態組件的使用時機是當且僅當數據展示、不需要邏輯處理的時候來使用。

沒有this 列印內部的this。得到undefined。 function HotList(props){ 　　console.log("列印函數組件內部的this：",this) }

沒有生命周期 函數組件內部也沒有生命周期。

總結：

函數組件只有當展示視圖的時候才用。做複雜的數據處理、需要有自己的狀態的時候，需要用類組件。