淺談react無狀態組件(啞組件)和有狀態組件(智能組件)的區別


(1)無狀態組件

  無狀態組件(Stateless Component)是最基礎的組件形式,由於沒有狀態的影響所以就是純靜態展示的作用。一般來說,各種UI庫里也是最開始會開發的組件類別。如按鈕、標簽、輸入框等。它的基本組成結構就是屬性(props)加上一個渲染函數(render)。由於不涉及到狀態的更新,所以這種組件的復用性也最強。

 

(2)有狀態組件

  在無狀態組件的基礎上,如果組件內部包含狀態(state)且狀態隨着事件或者外部的消息而發生改變的時候,這就構成了有狀態組件(Stateful Component)。有狀態組件通常會帶有生命周期(lifecycle),用以在不同的時刻觸發狀態的更新。這種組件也是通常在寫業務邏輯中最經常使用到的,根據不同的業務場景組件的狀態數量以及生命周期機制也不盡相同。

 

(3)對比

  在React中,我們通常通過props和state來處理兩種類型的數據。props是只讀的,只能由父組件設置。state在組件內定義,在組件的生命周期中可以更改。基本上,無狀態組件(也稱為啞組件)使用props來存儲數據,而有狀態組件(也稱為智能組件)使用state來存儲數據。

 

(4)選取

總的來說:無狀態函數式寫法 優於React.createClass,而React.Component優於React.createClass。能用React.Component創建的組件的就盡量不用React.createClass形式創建組件。


免責聲明!

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



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