目錄：

1. 組件名字首字母一定是大寫的2. 返回一個jsx3. jsx依賴React，所以組件內部需要引入React4. 組件傳參

a. 傳遞.b. 接收. function Component( props ){...}

c. 使用.const { list } =props，list就是參數數據5. 缺點：【無狀態組件】只能實現很簡單的視圖展示功能，沒有自己的內容數據、沒有狀態，沒有邏輯處理，【沒有this】，【沒有生命周期】。6. 16.7以后版本的react有狀態和鉤子函數提供使用。不過版本過新不推薦用

內部不用render函數，會自動把return返回結果當做render返回結果【見類組件的必須要求】

js文件中的函數組件：

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

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

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

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

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

組件身上寫className沒用：

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

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

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

組件傳參：

傳入 - 屬性傳參

接收 - 參數接收

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)

}

沒有生命周期

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

總結：

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

總結

以上是生活随笔為你收集整理的antd 函数组件_React - 组件：函数组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。