React - 組件：函數組件

目錄：

    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)
}

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

 

總結：

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