React 中的props,state

一.props

props是組件自身的屬性,一般用於嵌套內外層組件中,負責傳遞信息(通常是由父組件向子層組件傳遞)
注意:props對象中的屬性與組件的屬性一一對應,不要直接去修改props中的屬性的值。

…this.props:
props提供的語法糖,可以將父組件中的全部屬性都複製給子組件。

this.props.children:
children是一個例外,不是跟組件的屬性對應,表示組件的所有子節點。
在這裏插入圖片描述
在這裏插入圖片描述

屬性的驗證(propType):

組件類的屬性,用於驗證組件實例的屬性是否符合要求。
在這裏插入圖片描述

設置屬性的默認值:

通過實現組件的getDefaultProps方法,對屬性設置默認值,以對象的形式返回所有的默認值。
在這裏插入圖片描述

二.State

狀態,組件自身的屬性,組件一般會被看成是狀態機來處理。
當state發生變化時,會調用組件內部的render方法。

三.JSX語法

1.JSX不是一門新語言,是個語法糖,JSX必須藉助React環境運行;
2.JSX標籤其實就是HTML,只不過我們再JavaScript中書寫這些標籤的時候,不用使用""括起來,可以像HTNL一樣書寫。
3.轉化:JSX語法能夠讓我們更直觀的看到組件的DOM結構,不能直接在瀏覽器上運行,最終會轉化成Javascript代碼在瀏覽器上運行。
4.在JSX中運行JavaScript代碼,使用{}括起來{表達式}。

四.組件的生命週期

組件的生命週期分成三個階段:
Mounting:組件掛載,已插入真實DOM
Updating:組件更新,正在被重新渲染;
Unmounting:組件移除,已移除真實DOM;
組件生命週期可分爲四個階段:
創建,實例化,更新,銷燬;
在這裏插入圖片描述
生命週期中與State和props相關:
(1)getDefaultProps
(2)getInitialState

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章