react生命周期分為三個階段:
1.初始化
2.更新
3.銷毀
- 1.初始化
- 1、getDefaultProps()
設置默認的props,也可以用dufaultProps設置組件的默認屬性.- 2、getInitialState()
在使用es6的class語法時是沒有這個鉤子函數的,可以直接在constructor中定義this.state。此時可以訪問this.props- 3、componentWillMount()
組件初始化時只調用,以后組件更新不調用,整個生命周期只調用一次,此時可以修改state。- 4、render()
1> react最重要的步驟,創建虛擬dom,進行diff算法,更新dom樹都在此進行。此時就不能更改state了。
2> 該方法會創建一個虛擬DOM,用來表示組件的輸出。對于一個組件來講,render方法是唯一一個必需的方法。render方法需要滿足下面幾點:
**只能通過 this.props 和 this.state 訪問數據(不能修改)
**可以返回 null,false 或者任何React組件
**只能出現一個頂級組件,不能返回一組元素
**不能改變組件的狀態
**不能修改DOM的輸出
3> render方法返回的結果并不是真正的DOM元素,而是一個虛擬的表現,類似于一個DOM tree的結構的對象。react之所以效率高,就是這個原因。- 5、componentDidMount()
組件渲染之后調用,只調用一次。
- 2.更新
- 1、componentWillReceiveProps(nextProps)
組件初始化時不調用,組件接受新的props時調用。- 2、shouldComponentUpdate(nextProps, nextState)
react性能優化非常重要的一環。組件接受新的state或者props時調用,我們可以設置在此對比前后兩個props和state是否相同,如果相同則返回false阻止更新,因為相同的屬性狀態一定會生成相同的dom樹,這樣就不需要創造新的dom樹和舊的dom樹進行diff算法對比,節省大量性能,尤其是在dom結構復雜的時候- 3、componentWillUpdata(nextProps, nextState)
組件初始化時不調用,只有在組件將要更新時才調用,此時可以修改state- 4、render()
組件渲染- 5、componentDidUpdate()
組件初始化時不調用,組件更新完成后調用,此時可以獲取dom節點。
- 3.卸載
- componentWillUnmount()
組件將要卸載時調用,一些事件監聽和定時器需要在此時清除。