1榜贴,constructor()函數(shù)
*執(zhí)行的時間:組件被加載前最先調(diào)用轻要,并且僅調(diào)用一次
*作用:定義狀態(tài)機(jī)變量
*注意:第一個語句必須是super(props)沾鳄,正確定義狀態(tài)機(jī)代碼如下:
constructor(props){
super(props),
this.state={
content:null
}
}
2.componentwillmount()
*執(zhí)行時間:組件初始渲染(render()被調(diào)用前)前調(diào)用箕戳,并且僅調(diào)用一次
*作用:如果在這個函數(shù)中調(diào)用setState改變某些狀態(tài)機(jī)黔帕,react會等待setState完成后再渲染組件
*注意:子組件也有componentWillMount函數(shù)代咸,在父組件的該函數(shù)調(diào)用再被調(diào)用
3.render()
*執(zhí)行時間:componentWillMount之后,componentDidMount之前
*作用:渲染掛載組件
*觸發(fā)條件:(1)初始化加載頁面(2)狀態(tài)機(jī)改變setState成黄,(3)接受到新的props(父組件更新)
*組件所必不可少的核心函數(shù)呐芥,不能在該函數(shù)中修改狀態(tài)機(jī)state
4.componentDidMount()
*執(zhí)行時間:render()之后被調(diào)用,并且僅調(diào)用一次
*作用:渲染掛載組件奋岁,可以使用refs(備注:React支持一個特殊的屬性思瘟,你可以將這個屬性加在任何通過render()返回的組件中,這也就是說對render返回的組件進(jìn)行一個標(biāo)記闻伶,可以方便的定位這個組件實(shí)例)
*注意:自組件也有該函數(shù)滨攻,在父組件的該函數(shù)調(diào)用前被調(diào)用。如果在該函數(shù)中修改某些狀態(tài)機(jī)state蓝翰,會重新渲染render組件光绕。所以有些組件為減少渲染次數(shù),可以將某些修改狀態(tài)機(jī)的操作放在componentWillMount函數(shù)中畜份,如果需要再程序啟動顯示初始化頁面后從網(wǎng)絡(luò)獲取數(shù)據(jù)诞帐,可以將網(wǎng)絡(luò)請求的代碼放在該函數(shù)中。
5.componentWillReceiveProps(nextProps)
*執(zhí)行時間:組件渲染后爆雹,當(dāng)組件接受新的props時調(diào)用景埃,該函數(shù)接受一個object參數(shù),新的(props),props是父組件傳遞給自組件的顶别,父組件發(fā)生render的時候子組件就會調(diào)用
*作用:渲染掛載組件,可以使用refs(備注:react支持一個特殊的屬性拒啰,你可以將這個屬性加在任何通過render()返回的組件中驯绎,這也就是說對render返回的組件進(jìn)行一個標(biāo)記,可以方便的定位這個組件實(shí)例)
注意:react初次渲染時谋旦,該函數(shù)并不會被觸發(fā)剩失,因此有時候該函數(shù)需要和componentWillMount和componentDidMount組合使用,使用該函數(shù)一定要加nextprops參數(shù)册着,首次使用了解的可以先打印結(jié)果(nextProps)拴孤;
6.shouldComponentUpdate(nextProps,nextState)
*執(zhí)行時間:組件掛載后(即執(zhí)行完render),接受到新的props和state時被調(diào)用,即每次執(zhí)行setState都會執(zhí)行該函數(shù)甲捏,來判斷是否重新render組件演熟,默認(rèn)返回true;接受兩個函數(shù),第一個是新的props芒粹,第二個是新的state兄纺,
*作用:如果有些變化不需要重新render組件,可以在該函數(shù)中阻攔化漆。
*注意:該方法在初始化渲染的時候不會調(diào)用估脆,在使用forceUpdate方法的時候也不會。
7.componentWillUpdate()
*執(zhí)行時間:在接受到新的props或者state座云,重新渲染之前立刻調(diào)用疙赠,在初始化渲染的時候不會被調(diào)用,
*作用:為即將發(fā)生的重新渲染做一些準(zhǔn)備工作
*注意:不能在該函數(shù)中通過this.setState再次改變狀態(tài)機(jī)朦拖,如果需要圃阳,則在componentWillReceiveProps函數(shù)中改變
8:componentDidUpdate()
*執(zhí)行時間:重新渲染后調(diào)用,在初始化渲染時該方法不會被調(diào)用贞谓,
*作用:使用該方法可以在組件更新之后操作DOM元素
9.componentWillUnmount()
*執(zhí)行時間:組件被卸載前調(diào)用
*作用:在該方法中執(zhí)行任何必要的清理限佩,比如無效的定時器,或者清除在componentDidMount中創(chuàng)建的DOM元素裸弦。
注意:*當(dāng)一個頁面中存在子父組件時祟同,要注意componentWillMount和componentDidMount的使用,如果需要先加載父組件(獲取網(wǎng)路數(shù)據(jù))理疙,父組件傳值給子組件晕城,再加載子組件(獲取網(wǎng)路數(shù)據(jù)),那么不能同時在子父組件中使用componentDidMount獲取網(wǎng)路數(shù)據(jù)窖贤,因?yàn)闀葓?zhí)行子組件的componetDidMount砖顷,會由于未得到父組件的傳值而報(bào)錯。解決方案:(1)父組件componentWillMount,子組件:componentDidMount,(2)父組件:componentWillMount,子組件:componentDidMount
*當(dāng)一個頁面中如果要實(shí)現(xiàn)左右聯(lián)動的效果赃梧,(比如a頁面中包含b1(左)和b2(右)頁面滤蝠,單擊b1中的知識點(diǎn),b2頁面內(nèi)容對應(yīng)變化授嘀,b1向b2通過redux傳參物咳,b2首次通過componentDidMount接收,后來通過componentWillReceiveProps接收)
參考來源:https://blog.csdn.net/zrcj0706/article/details/78608740