(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形式創建組件。