react 生命周期函數(shù)

1,constructor()函數(shù)

*執(zhí)行的時(shí)間:組件被加載前最先調(diào)用,并且僅調(diào)用一次

*作用:定義狀態(tài)機(jī)變量

*注意:第一個(gè)語句必須是super(props),正確定義狀態(tài)機(jī)代碼如下:

constructor(props){

super(props),

this.state={

content:null

}

}


2.componentwillmount()

*執(zhí)行時(shí)間:組件初始渲染(render()被調(diào)用前)前調(diào)用,并且僅調(diào)用一次

*作用:如果在這個(gè)函數(shù)中調(diào)用setState改變某些狀態(tài)機(jī),react會(huì)等待setState完成后再渲染組件

*注意:子組件也有componentWillMount函數(shù),在父組件的該函數(shù)調(diào)用再被調(diào)用

3.render()

*執(zhí)行時(shí)間:componentWillMount之后,componentDidMount之前

*作用:渲染掛載組件

*觸發(fā)條件:(1)初始化加載頁面(2)狀態(tài)機(jī)改變setState,(3)接受到新的props(父組件更新)

*組件所必不可少的核心函數(shù),不能在該函數(shù)中修改狀態(tài)機(jī)state

4.componentDidMount()

*執(zhí)行時(shí)間:render()之后被調(diào)用,并且僅調(diào)用一次

*作用:渲染掛載組件,可以使用refs(備注:React支持一個(gè)特殊的屬性,你可以將這個(gè)屬性加在任何通過render()返回的組件中,這也就是說對(duì)render返回的組件進(jìn)行一個(gè)標(biāo)記,可以方便的定位這個(gè)組件實(shí)例)

*注意:自組件也有該函數(shù),在父組件的該函數(shù)調(diào)用前被調(diào)用。如果在該函數(shù)中修改某些狀態(tài)機(jī)state,會(huì)重新渲染render組件。所以有些組件為減少渲染次數(shù),可以將某些修改狀態(tài)機(jī)的操作放在componentWillMount函數(shù)中,如果需要再程序啟動(dòng)顯示初始化頁面后從網(wǎng)絡(luò)獲取數(shù)據(jù),可以將網(wǎng)絡(luò)請(qǐng)求的代碼放在該函數(shù)中。

5.componentWillReceiveProps(nextProps)

*執(zhí)行時(shí)間:組件渲染后,當(dāng)組件接受新的props時(shí)調(diào)用,該函數(shù)接受一個(gè)object參數(shù),新的(props),props是父組件傳遞給自組件的,父組件發(fā)生render的時(shí)候子組件就會(huì)調(diào)用

*作用:渲染掛載組件,可以使用refs(備注:react支持一個(gè)特殊的屬性,你可以將這個(gè)屬性加在任何通過render()返回的組件中,這也就是說對(duì)render返回的組件進(jìn)行一個(gè)標(biāo)記,可以方便的定位這個(gè)組件實(shí)例)

注意:react初次渲染時(shí),該函數(shù)并不會(huì)被觸發(fā),因此有時(shí)候該函數(shù)需要和componentWillMount和componentDidMount組合使用,使用該函數(shù)一定要加nextprops參數(shù),首次使用了解的可以先打印結(jié)果(nextProps);

6.shouldComponentUpdate(nextProps,nextState)

*執(zhí)行時(shí)間:組件掛載后(即執(zhí)行完render),接受到新的props和state時(shí)被調(diào)用,即每次執(zhí)行setState都會(huì)執(zhí)行該函數(shù),來判斷是否重新render組件,默認(rèn)返回true;接受兩個(gè)函數(shù),第一個(gè)是新的props,第二個(gè)是新的state,

*作用:如果有些變化不需要重新render組件,可以在該函數(shù)中阻攔。

*注意:該方法在初始化渲染的時(shí)候不會(huì)調(diào)用,在使用forceUpdate方法的時(shí)候也不會(huì)。

7.componentWillUpdate()

*執(zhí)行時(shí)間:在接受到新的props或者state,重新渲染之前立刻調(diào)用,在初始化渲染的時(shí)候不會(huì)被調(diào)用,

*作用:為即將發(fā)生的重新渲染做一些準(zhǔn)備工作

*注意:不能在該函數(shù)中通過this.setState再次改變狀態(tài)機(jī),如果需要,則在componentWillReceiveProps函數(shù)中改變

8:componentDidUpdate()

*執(zhí)行時(shí)間:重新渲染后調(diào)用,在初始化渲染時(shí)該方法不會(huì)被調(diào)用,

*作用:使用該方法可以在組件更新之后操作DOM元素

9.componentWillUnmount()

*執(zhí)行時(shí)間:組件被卸載前調(diào)用

*作用:在該方法中執(zhí)行任何必要的清理,比如無效的定時(shí)器,或者清除在componentDidMount中創(chuàng)建的DOM元素。

注意:*當(dāng)一個(gè)頁面中存在子父組件時(shí),要注意componentWillMount和componentDidMount的使用,如果需要先加載父組件(獲取網(wǎng)路數(shù)據(jù)),父組件傳值給子組件,再加載子組件(獲取網(wǎng)路數(shù)據(jù)),那么不能同時(shí)在子父組件中使用componentDidMount獲取網(wǎng)路數(shù)據(jù),因?yàn)闀?huì)先執(zhí)行子組件的componetDidMount,會(huì)由于未得到父組件的傳值而報(bào)錯(cuò)。解決方案:(1)父組件componentWillMount,子組件:componentDidMount,(2)父組件:componentWillMount,子組件:componentDidMount

*當(dāng)一個(gè)頁面中如果要實(shí)現(xiàn)左右聯(lián)動(dòng)的效果,(比如a頁面中包含b1(左)和b2(右)頁面,單擊b1中的知識(shí)點(diǎn),b2頁面內(nèi)容對(duì)應(yīng)變化,b1向b2通過redux傳參,b2首次通過componentDidMount接收,后來通過componentWillReceiveProps接收)

參考來源:https://blog.csdn.net/zrcj0706/article/details/78608740

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 說在前面 關(guān)于 react 的總結(jié)過去半年就一直碎碎念著要搞起來,各(wo)種(tai)原(lan)因(le)。心...
    陳嘻嘻啊閱讀 7,037評(píng)論 7 41
  • 生命周期流程圖簡單如下: 組件讓你把用戶界面分成獨(dú)立的,可重復(fù)使用的部分,并且將每個(gè)部分分開考慮。React.Co...
    Simple_Learn閱讀 1,197評(píng)論 0 0
  • 實(shí)例化 首次實(shí)例化 getDefaultProps getInitialState componentWillMo...
    Oo晨晨oO閱讀 178評(píng)論 0 1
  • 在React Native中使用組件來封裝界面模塊時(shí),整個(gè)界面就是一個(gè)大的組件,開發(fā)過程就是不斷優(yōu)化和拆分界面組件...
    ITxiansheng閱讀 985評(píng)論 1 2
  • 組件的生命周期方法分以下三個(gè)階段。 Mounting當(dāng)創(chuàng)建組件的實(shí)例并將其插入到DOM中時(shí),將調(diào)用這些方法:con...
    _八神光_閱讀 1,219評(píng)論 0 0

友情鏈接更多精彩內(nèi)容