React中class創建組件和function創建組件的區別


兩種創建組件方式的對比

注意:使用class關鍵字創建的組件,有自己的私有數據(this.state)和生命周期函數;

注意:使用function創建的組件,只有props,沒有自己的私有數據和生命周期函數;

1.用構造函數創建出來的組件:叫做無狀態組件【無狀態組件用的不多】

2.用class關鍵字創建出來的組件叫做有狀態組件【用的最多】

3.什么情況下使用有狀態組件?什么情況下用無狀態組件?

  • 如果一個組件需要有自己的私有數據,則推薦使用 :class創建的有狀態組件;

  • 如果一個組件不需要私有的數據,則推薦使用,無狀態組件;

  • React 官方說:無狀態組件,由於沒有自己的state和生命周期函數,所以運行效率會比又狀態組件稍微高一些;

有狀態組件和無狀態組件的本質區別就是:有無state屬性和有無生命周期函數

4。組件中的props和state/data之間的區別

  • props中的數據都是外界傳遞過來的;

  • state/data中的數據,都是組件私有的;(通過ajax獲取回來的數據一般都為私有數據)

  • props中的數據都是只讀的,不能重新賦值;

  • state/data中的數據,都是可讀可寫的;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM