一.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