react 生命周期函數(shù)

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末蹄皱,一起剝皮案震驚了整個濱河市览闰,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌巷折,老刑警劉巖压鉴,帶你破解...
    沈念sama閱讀 211,265評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異锻拘,居然都是意外死亡油吭,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評論 2 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來上鞠,“玉大人际邻,你說我怎么就攤上這事∩盅郑” “怎么了世曾?”我有些...
    開封第一講書人閱讀 156,852評論 0 347
  • 文/不壞的土叔 我叫張陵,是天一觀的道長谴咸。 經(jīng)常有香客問我轮听,道長,這世上最難降的妖魔是什么岭佳? 我笑而不...
    開封第一講書人閱讀 56,408評論 1 283
  • 正文 為了忘掉前任血巍,我火速辦了婚禮,結(jié)果婚禮上珊随,老公的妹妹穿的比我還像新娘述寡。我一直安慰自己,他們只是感情好叶洞,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,445評論 5 384
  • 文/花漫 我一把揭開白布鲫凶。 她就那樣靜靜地躺著,像睡著了一般衩辟。 火紅的嫁衣襯著肌膚如雪螟炫。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,772評論 1 290
  • 那天艺晴,我揣著相機(jī)與錄音昼钻,去河邊找鬼。 笑死封寞,一個胖子當(dāng)著我的面吹牛然评,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播狈究,決...
    沈念sama閱讀 38,921評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼沾瓦,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了谦炒?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,688評論 0 266
  • 序言:老撾萬榮一對情侶失蹤风喇,失蹤者是張志新(化名)和其女友劉穎宁改,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體魂莫,經(jīng)...
    沈念sama閱讀 44,130評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡还蹲,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,467評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片谜喊。...
    茶點(diǎn)故事閱讀 38,617評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡潭兽,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出斗遏,到底是詐尸還是另有隱情山卦,我是刑警寧澤,帶...
    沈念sama閱讀 34,276評論 4 329
  • 正文 年R本政府宣布诵次,位于F島的核電站账蓉,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏逾一。R本人自食惡果不足惜铸本,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,882評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望遵堵。 院中可真熱鬧箱玷,春花似錦、人聲如沸陌宿。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽限番。三九已至舱污,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間弥虐,已是汗流浹背扩灯。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留霜瘪,地道東北人珠插。 一個月前我還...
    沈念sama閱讀 46,315評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像颖对,于是被迫代替她去往敵國和親捻撑。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,486評論 2 348

推薦閱讀更多精彩內(nèi)容

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