react 生命週期

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

初始化

一、getDefaultProps()

設置默認的props，也能夠用dufaultProps設置組件的默認屬性

2.getInitialState()

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

3，componentWillMount()

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

4，render()

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

5，componentDidMount()

組件渲染以後調用，只調用一次

更新

6，componentWillReceiveProps(nextProps)

組件初始化時不調用，組件接受新的props時調用。 React 16.3 之後的版本加了兩個生命週期。 getDerivedStateFromProps 和 getSnapshotBeforeUpdate。 用 getDerivedStateFromProps 有些需求能夠替代 componentWillReceiveProp

7，shouldComponentUpdate(nextProps, nextState)

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

八、componentWillUpdata(nextProps, nextState)

 

組件初始化時不調用，只有在組件將要更新時才調用，此時能夠修改state，在 componentWillUpdate 的函數當中，此時能夠更改 state, 好比 nextState.name = '你想要更改的值'， render 的時候會用你更改的值。 這裏面調用 this.setState() 要謹慎，不能每次在 componentWillUpdate 執行 this.setState()，不然會陷入死循環

9，render()

組件渲染

10，componentDidUpdate()

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

卸載

十一、componentWillUnmount()

 

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