react生命週期

React 生命週期分爲三種狀態 1. 初始化 2.更新 3.銷燬react

  • 初始化

一、getDefaultProps()es6

設置默認的props,也能夠用dufaultProps設置組件的默認屬性.算法

二、getInitialState()性能優化

在使用es6的class語法時是沒有這個鉤子函數的,能夠直接在constructor中定義this.state。此時能夠訪問this.propsdom

三、componentWillMount()函數

組件初始化時只調用,之後組件更新不調用,整個生命週期只調用一次,此時能夠修改state。性能

四、 render()優化

react最重要的步驟,建立虛擬dom,進行diff算法,更新dom樹都在此進行。此時就不能更改state了。this

五、componentDidMount()component

組件渲染以後調用,只調用一次。

  • 更新

六、componentWillReceiveProps(nextProps)

組件初始化時不調用,組件接受新的props時調用。

七、shouldComponentUpdate(nextProps, nextState)

react性能優化很是重要的一環。組件接受新的state或者props時調用,咱們能夠設置在此對比先後兩個props和state是否相同,若是相同則返回false阻止更新,由於相同的屬性狀態必定會生成相同的dom樹,這樣就不須要創造新的dom樹和舊的dom樹進行diff算法對比,節省大量性能,尤爲是在dom結構複雜的時候

八、componentWillUpdata(nextProps, nextState)

組件初始化時不調用,只有在組件將要更新時才調用,此時能夠修改state

九、render()

組件渲染

十、componentDidUpdate()

組件初始化時不調用,組件更新完成後調用,此時能夠獲取dom節點。

  • 卸載

十一、componentWillUnmount()

組件將要卸載時調用,一些事件監聽和定時器須要在此時清除。

相關文章
相關標籤/搜索