React 生命週期

前言

學習React，生命週期很重要，咱們瞭解完生命週期的各個組件，對寫高性能組件會有很大的幫助.

Ract生命週期

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

• 初始化

一、getDefaultProps()

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

二、getInitialState()

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

三、componentWillMount()

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

四、 render()

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

五、componentDidMount()

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

• 更新

六、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()

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

結束語

以上就是React 的生命週期，你們能夠自行寫下code測試一下，在這裏我就不貼code 了。