前言
????????學(xué)習(xí)React元镀,生命周期很重要绍填,我們了解完生命周期的各個(gè)組件,對(duì)寫高性能組件會(huì)有很大的幫助.
Ract生命周期
????????React 生命周期分為三種狀態(tài) 1. 初始化 2.更新 3.銷毀
初始化
1栖疑、getDefaultProps()
????設(shè)置默認(rèn)的props讨永,也可以用dufaultProps設(shè)置組件的默認(rèn)屬性.
2、getInitialState()
????在使用es6的class語(yǔ)法時(shí)是沒(méi)有這個(gè)鉤子函數(shù)的遇革,可以直接在constructor中定義this.state卿闹。此時(shí)可以訪問(wèn)this.props
3、componentWillMount()
????組件初始化時(shí)只調(diào)用萝快,以后組件更新不調(diào)用锻霎,整個(gè)生命周期只調(diào)用一次,此時(shí)可以修改state揪漩。
4旋恼、 render()
????react最重要的步驟,創(chuàng)建虛擬dom奄容,進(jìn)行diff算法冰更,更新dom樹(shù)都在此進(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è)置在此對(duì)比前后兩個(gè)props和state是否相同官册,如果相同則返回false阻止更新生兆,因?yàn)橄嗤膶傩誀顟B(tài)一定會(huì)生成相同的dom樹(shù),這樣就不需要?jiǎng)?chuàng)造新的dom樹(shù)和舊的dom樹(shù)進(jìn)行diff算法對(duì)比膝宁,節(jié)省大量性能鸦难,尤其是在dom結(jié)構(gòu)復(fù)雜的時(shí)候
8、componentWillUpdate(nextProps, nextState)
????組件初始化時(shí)不調(diào)用员淫,只有在組件將要更新時(shí)才調(diào)用合蔽。在此方法里禁止修改state屬性,否則使得程序陷入死循環(huán)介返。
9拴事、render()
????組件渲染
10、componentDidUpdate()
????組件初始化時(shí)不調(diào)用圣蝎,組件更新完成后調(diào)用刃宵,此時(shí)可以獲取dom節(jié)點(diǎn)。
卸載
11徘公、componentWillUnmount()
????組件將要卸載時(shí)調(diào)用牲证,一些事件監(jiān)聽(tīng)和定時(shí)器需要在此時(shí)清除。