react小記 組件的生命周期

react組件的生命周期,分為三個(gè)過程:

1烛亦,裝載過程(mount)诈泼,也就是把組件第一次在DOM中渲染的過程,

2煤禽,更新過程(update)铐达,當(dāng)組件被重新渲染的過程,

3檬果,卸載過程(unMount)娶桦,組件從DOM中刪除的過程。

三種不同的過程汁汗,React庫會(huì)依次調(diào)用組件的一些成員函數(shù)衷畦,這些函數(shù)稱為生命周期函數(shù)。所以要定制一個(gè)React組件知牌,實(shí)際就是定制這些生命周期函數(shù)祈争。


裝載過程,當(dāng)組件第一次被渲染的時(shí)候角寸,依次調(diào)用的函數(shù)如下:

constructor,getInitialState,getDEfaultProps,componentWillMount,render,componentDidMount


優(yōu)化:在render函數(shù)中調(diào)用this.setState毫無疑問是錯(cuò)誤的菩混,因?yàn)橐粋€(gè)純函數(shù)不應(yīng)該引起狀態(tài)的改變忿墅。


裝載過程:

componentWillMount和componentDidMount這對(duì)兄弟函數(shù)還有一個(gè)區(qū)別,就是coponentWillMount可以在服務(wù)器端被調(diào)用沮峡,也可以在瀏覽器端被調(diào)用疚脐。而componentDidMount只能在瀏覽器端被調(diào)用,在服務(wù)器端使用React的時(shí)候不會(huì)被調(diào)用邢疙。

更新過程:

更新過程會(huì)依次調(diào)用下面的生命周期函數(shù)棍弄,其中render函數(shù)和裝載過程一樣,沒有差別疟游。

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

render

componentDidUpdate

1,componentWillReceiveProps呼畸,只要是父組件的render函數(shù)被調(diào)用,在render函數(shù)里面被渲染的子組件就會(huì)經(jīng)歷更新過程颁虐,不管父組件傳給自組件的props有沒有改變蛮原,都會(huì)觸發(fā)子組件的componentWillReceiveProps函數(shù)。

通過this.setState方法觸發(fā)的更新過程不會(huì)調(diào)用這個(gè)函數(shù)另绩,這是因?yàn)檫@個(gè)函數(shù)適合根據(jù)新的props值來計(jì)算出是不是要更新內(nèi)部狀態(tài)state儒陨。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市笋籽,隨后出現(xiàn)的幾起案子框全,更是在濱河造成了極大的恐慌,老刑警劉巖干签,帶你破解...
    沈念sama閱讀 216,692評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件津辩,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡容劳,警方通過查閱死者的電腦和手機(jī)喘沿,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,482評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來竭贩,“玉大人蚜印,你說我怎么就攤上這事×袅浚” “怎么了窄赋?”我有些...
    開封第一講書人閱讀 162,995評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長楼熄。 經(jīng)常有香客問我忆绰,道長,這世上最難降的妖魔是什么可岂? 我笑而不...
    開封第一講書人閱讀 58,223評(píng)論 1 292
  • 正文 為了忘掉前任错敢,我火速辦了婚禮,結(jié)果婚禮上缕粹,老公的妹妹穿的比我還像新娘稚茅。我一直安慰自己纸淮,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,245評(píng)論 6 388
  • 文/花漫 我一把揭開白布亚享。 她就那樣靜靜地躺著咽块,像睡著了一般。 火紅的嫁衣襯著肌膚如雪欺税。 梳的紋絲不亂的頭發(fā)上侈沪,一...
    開封第一講書人閱讀 51,208評(píng)論 1 299
  • 那天,我揣著相機(jī)與錄音魄衅,去河邊找鬼。 笑死塘辅,一個(gè)胖子當(dāng)著我的面吹牛晃虫,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播扣墩,決...
    沈念sama閱讀 40,091評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼哲银,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了呻惕?” 一聲冷哼從身側(cè)響起荆责,我...
    開封第一講書人閱讀 38,929評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎亚脆,沒想到半個(gè)月后做院,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,346評(píng)論 1 311
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡濒持,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,570評(píng)論 2 333
  • 正文 我和宋清朗相戀三年键耕,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片柑营。...
    茶點(diǎn)故事閱讀 39,739評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡屈雄,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出官套,到底是詐尸還是另有隱情酒奶,我是刑警寧澤,帶...
    沈念sama閱讀 35,437評(píng)論 5 344
  • 正文 年R本政府宣布奶赔,位于F島的核電站惋嚎,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏站刑。R本人自食惡果不足惜瘸彤,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,037評(píng)論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望笛钝。 院中可真熱鬧质况,春花似錦愕宋、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,677評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至臼朗,卻和暖如春邻寿,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背视哑。 一陣腳步聲響...
    開封第一講書人閱讀 32,833評(píng)論 1 269
  • 我被黑心中介騙來泰國打工绣否, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人挡毅。 一個(gè)月前我還...
    沈念sama閱讀 47,760評(píng)論 2 369
  • 正文 我出身青樓蒜撮,卻偏偏與公主長得像,于是被迫代替她去往敵國和親跪呈。 傳聞我的和親對(duì)象是個(gè)殘疾皇子段磨,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,647評(píng)論 2 354

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

  • 生命周期流程圖簡單如下: 組件讓你把用戶界面分成獨(dú)立的,可重復(fù)使用的部分耗绿,并且將每個(gè)部分分開考慮苹支。React.Co...
    Simple_Learn閱讀 1,079評(píng)論 0 0
  • React 組件的一生,是光榮的一生误阻,是革命的一生债蜜,在它的一生中會(huì)經(jīng)歷這樣幾個(gè)階段: 裝載階段 更新階段 銷毀階段...
    柏丘君閱讀 948評(píng)論 0 0
  • 原教程內(nèi)容詳見精益 React 學(xué)習(xí)指南,這只是我在學(xué)習(xí)過程中的一些閱讀筆記究反,個(gè)人覺得該教程講解深入淺出策幼,比目前大...
    leonaxiong閱讀 2,834評(píng)論 1 18
  • 目前,react組件有三種寫法奴紧,分別是es5的createClass寫法特姐,es6的class寫法,以及statel...
    ZoomFunc閱讀 1,649評(píng)論 0 1
  • 感恩萬能的朋友圈剛才在朋友圈看到黍氮,一位朋友發(fā)的文字:只要你具足菩提心唐含,人生所有美好的東西都會(huì)像雨露一樣降臨到你身上...
    武丹yoyo閱讀 297評(píng)論 0 2