react中生命周期函數(shù)主要分為三個階段
1.創(chuàng)建階段
2.運(yùn)行階段
3.銷毀階段
創(chuàng)建階段:創(chuàng)建階段經(jīng)過的五個小階段
先給你的props創(chuàng)建一個默認(rèn)值??this.state = {}
?this.state = {}
this.state是用來初始化組件的私有數(shù)據(jù)的,它定義在組件的consturctor構(gòu)造器函數(shù)中磕蛇,
this.state會第一時間被初始化纠亚,因?yàn)閏lass類中疼蛾,只要new這個類,必然會調(diào)用consturctor構(gòu)造器
componentWillMount()
? ??組件將要被創(chuàng)建(還沒被創(chuàng)建奥务,我們的數(shù)據(jù)將在這個階段拿到卓鹿。一般在這個階段發(fā)送ajax請求)
? ? 這個函數(shù)是組件的虛擬DOM元素檩电,將要掛載到頁面上的時候執(zhí)行
????當(dāng)執(zhí)行到這個生命周期函數(shù)的時候棚瘟,即將要開始渲染內(nèi)存中的虛擬DOM了现斋,當(dāng)這個函數(shù)執(zhí)行完,內(nèi)存中就有了一個渲染好的虛擬DOM,但是頁面上尚未真正的顯示DOM元素呢偎蘸。
????相當(dāng)于vue中的created()生命周期函數(shù)
render()
? ? 創(chuàng)建虛擬DOM
componentDidMount()
? ? 將虛擬DOM渲染到頁面上
? ? 在這個函數(shù)中庄蹋,我們可以放心的操作頁面上需要操作的DOM元素
? ? 所以說我們?nèi)绻氩僮鱀OM元素,最早只能在????componentDidMount() 中操作迷雪。
? ??componentDidMount()是創(chuàng)建階段的最后一個函數(shù)蔓肯。
? ? 相當(dāng)于vue中的mounted()生命周期函數(shù)
組件運(yùn)行階段的生命周期函數(shù)
this.setState()? ??更改了state值,頁面就會自動更新
通過狀態(tài)或?qū)傩缘母淖冋穹Γ紩|發(fā)組件的更新
componentWillReceiveProps? ??
只有當(dāng)外界傳遞給自組建的屬性被修改了蔗包,才會觸發(fā)這個鉤子函數(shù)
shouleComponentUpdate
組件是否要被更新
在shouleComponentUpdate中,要求必須返回一個布爾值慧邮。
如果返回值為false调限,則不會執(zhí)行后面的生命周期函數(shù),而是直接退回了‘運(yùn)行中’的狀態(tài)误澳。后面的render()沒被調(diào)用耻矮,因此頁面不會被更新,但是組件中的state狀態(tài)忆谓,卻被修改了裆装。
componentWillUpdate
組件將要被更新,此時組件還沒有被更新倡缠,此時得到的元素是頁面上舊的dom元素哨免。
this.ref.***
render? ??
重新渲染內(nèi)存中的虛擬DOM對象,此時獲取到頁面上的dom元素還是之前舊的dom元素
當(dāng)render調(diào)用完畢,我們的虛擬DOM樹已經(jīng)和組件的state保持一直了昙沦,
componentDidUpdate??
頁面更新完畢琢唾,新的dom已經(jīng)畫到(渲染到)頁面上。
此時state中的數(shù)據(jù)盾饮,虛擬DOM采桃,頁面上的DOM都是最新的,此時就可以放心大膽的操作了丘损。
卸載Unmount
componentWillUnmount
在這個鉤子函數(shù)中普办,組件尚可被使用,還沒開始卸載
componentWillReceiveProps()
當(dāng)父組件傳遞給子組件的props值發(fā)生變化的時候徘钥,就會觸發(fā)這個鉤子函數(shù)衔蹲。