React學習筆記3

標籤：

React的生命週期 生命週期分為三個階段 1.mounted（初始化的時候）

當我們看見頁面元素從JSX變成了DOM節點時，React組件已經被載入（mounted）到頁面中了

 2.update（組件在運行中如果發生狀態和屬性改變時）

當React組件中的資料發生改變時，需要重新渲染頁面（重新更新頁面元素的時候，例如擷取本次的資料和上次資料不一樣，需要重新更新頁面資料），這時需要將React組件重新渲染一次

 3.unmount（組件卸載和銷毀狀態）

當組件需要從頁面中廢棄和銷毀時，就需要將React組件從頁面中刪除

 React對這三個不同階段的狀態定義了不同的事件去監聽狀態 鉤子函數

當程式中某些狀態只要發生改變，程式立馬去通知對應的處理函數去處理，這個函數就是鉤子函數

 React在這三個狀態中封裝了哪些鉤子函數？ mounted狀態中的函數（初始化時候的鉤子函數）

1.getDefaultProps()

設定組件內部屬性（一般用於設定組件內部的常量），比如，請求一個ajax，請求的url就可以設定成內部屬性，因為url是不變的。返回對象

2.getInitialState()

設定組件內部的狀態。返回對象

3.componentWillMount()

組件即將載入時，在這時可以擷取ajax資料，並解析。

4.render()

預設。返回JSX

5.componentDidMount()

組件載入完畢時，掛載的狀態。比如： 
1.想得到渲染後的真實的DOM節點 
2.調用第三方外掛程式

以上五個鉤子函數按照序號的順序執行,範例程式碼如下：

 1 var Compo = React.createClass({ 2 getDefaultProps:function(){ 3 console.log("1 get props") 4 return {} 5 }, 6 getInitialState:function(){ 7 console.log("2 get state") 8 return {} 9 },10 componentWillMount:function(){11 console.log("3 will mount")12 },13 render:function(){14 console.log("4 render")15 return(16 <div>17 This is render!18 </div>19 )20 },21 componentDidMount:function(){22 console.log("5 did mount");23 }24 })25 ReactDOM.render(<Compo/>,document.getElementById("example"));

 

運行結果 

易錯：render只負責渲染，每次資料重新整理都調用render函數

 update狀態中的函數（運行中的鉤子函數）

1.componentWillReceiveProps(nextProps) 
當組件接收到新的props時,調用此函數,然後修改當前的props

2.shouldComponentUpdate(nextProps,nextState) 
給開發人員一個許可權，在收到新的props和state時，是否調用render渲染，可以寫入一些邏輯，控制資料的更新。返回Boolean

3.componentWillUpdate(nextProps,nextState) 
在組件重新渲染之前執行，在渲染之前最後的props和state都發生了改變，這個函數使用很少，一般用在日誌和記錄的列印

4.componentDidUpdate() 
當組件重新渲染完畢後調用

 組件運行中生命週期函數被觸發的條件：

1.當父組件修改子組件的屬性props時 
2.當組件自身修改狀態state時

 Unmount狀態中的函數(卸載時的鉤子函數)

componentWillUnmount() 
在組件即將被卸載時調用，這個函數幾乎不會使用到，因為瀏覽器本身具有記憶體回收機制

 總結 在開發中很少使用React全部的生命週期鉤子函數

React學習筆記3