前言

學(xué)習(xí)React，生命周期很重要，我們了解完生命周期的各個(gè)組件，對寫高性能組件會(huì)有很大的幫助.

Ract生命周期

React 生命周期分為三種狀態(tài) 1. 初始化 2.更新 3.銷毀

• 初始化

1、getDefaultProps()

設(shè)置默認(rèn)的props，也可以用dufaultProps設(shè)置組件的默認(rèn)屬性.

2、getInitialState()

在使用es6的class語法時(shí)是沒有這個(gè)鉤子函數(shù)的，可以直接在constructor中定義this.state。此時(shí)可以訪問this.props

3、componentWillMount()

組件初始化時(shí)只調(diào)用，以后組件更新不調(diào)用，整個(gè)生命周期只調(diào)用一次，此時(shí)可以修改state。

4、 render()

react最重要的步驟，創(chuàng)建虛擬dom，進(jìn)行diff算法，更新dom樹都在此進(jìn)行。此時(shí)就不能更改state了。

5、componentDidMount()

組件渲染之后調(diào)用，只調(diào)用一次。

• 更新

6、componentWillReceiveProps(nextProps)

組件初始化時(shí)不調(diào)用，組件接受新的props時(shí)調(diào)用。

7、shouldComponentUpdate(nextProps, nextState)

react性能優(yōu)化非常重要的一環(huán)。組件接受新的state或者props時(shí)調(diào)用，我們可以設(shè)置在此對比前后兩個(gè)props和state是否相同，如果相同則返回false阻止更新，因?yàn)橄嗤膶傩誀顟B(tài)一定會(huì)生成相同的dom樹，這樣就不需要?jiǎng)?chuàng)造新的dom樹和舊的dom樹進(jìn)行diff算法對比，節(jié)省大量性能，尤其是在dom結(jié)構(gòu)復(fù)雜的時(shí)候

8、componentWillUpdata(nextProps, nextState)

組件初始化時(shí)不調(diào)用，只有在組件將要更新時(shí)才調(diào)用，此時(shí)可以修改state

9、render()

組件渲染

10、componentDidUpdate()

組件初始化時(shí)不調(diào)用，組件更新完成后調(diào)用，此時(shí)可以獲取dom節(jié)點(diǎn)。

• 卸載

11、componentWillUnmount()

組件將要卸載時(shí)調(diào)用，一些事件監(jiān)聽和定時(shí)器需要在此時(shí)清除。

結(jié)束語

以上就是React 的生命周期。