react中的生命周期函數(shù)

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ù)衔蹲。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市吏饿,隨后出現(xiàn)的幾起案子踪危,更是在濱河造成了極大的恐慌蔬浙,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件贞远,死亡現(xiàn)場離奇詭異畴博,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)蓝仲,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進(jìn)店門俱病,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人袱结,你說我怎么就攤上這事亮隙。” “怎么了垢夹?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵溢吻,是天一觀的道長。 經(jīng)常有香客問我果元,道長促王,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任而晒,我火速辦了婚禮蝇狼,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘倡怎。我一直安慰自己迅耘,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布监署。 她就那樣靜靜地躺著颤专,像睡著了一般。 火紅的嫁衣襯著肌膚如雪焦匈。 梳的紋絲不亂的頭發(fā)上血公,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天,我揣著相機(jī)與錄音缓熟,去河邊找鬼。 笑死摔笤,一個胖子當(dāng)著我的面吹牛够滑,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播吕世,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼彰触,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了命辖?” 一聲冷哼從身側(cè)響起况毅,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤分蓖,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后尔许,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體么鹤,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年味廊,在試婚紗的時候發(fā)現(xiàn)自己被綠了蒸甜。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡余佛,死狀恐怖柠新,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情辉巡,我是刑警寧澤恨憎,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站郊楣,受9級特大地震影響框咙,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜痢甘,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一喇嘱、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧塞栅,春花似錦者铜、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至砾医,卻和暖如春拿撩,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背如蚜。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工压恒, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人错邦。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓探赫,卻偏偏與公主長得像,于是被迫代替她去往敵國和親撬呢。 傳聞我的和親對象是個殘疾皇子伦吠,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,922評論 2 361

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