React 組件生命周期

在組件的整個(gè)生命周期中展箱,隨著該組件的props或者state發(fā)生改變柏靶,其DOM表現(xiàn)也會(huì)有相應(yīng)的變化恃逻。一個(gè)組件就是一個(gè)狀態(tài)機(jī)蝇裤,對(duì)于特定地輸入介返,它總返回一致的輸出藏研。組件的生命周期可分成三個(gè)狀態(tài):實(shí)例化撵术、存在期和銷毀時(shí)逮光。

<h5>實(shí)例化</h5>
首次實(shí)例化钠乏,當(dāng)組件在客戶端被實(shí)例化栖秕,第一次被創(chuàng)建時(shí),以下方法依次被調(diào)用:

  getInitialState
  componentWillMount
  render
  componentDidMount```

實(shí)例化完成后的更新晓避,當(dāng)組件在服務(wù)端被實(shí)例化簇捍,首次被創(chuàng)建時(shí),以下方法依次被調(diào)用:
``` getInitialState
  componentWillMount
  render
  componentDidMount```
```注:componentDidMount 不會(huì)在服務(wù)端被渲染的過程中調(diào)用```
<h5>存在期 </h5>
組件已存在時(shí)的狀態(tài)改變
``` componentWillReceiveProps
  shouldComponentUpdate
  componentWillUpdate
  render
  componentDidUpdate```
<h5>銷毀&清理期 </h5>
```componentWillUnmount```

1.getDefaultProps

作用于組件類俏拱,只調(diào)用一次暑塑,返回對(duì)象用于設(shè)置默認(rèn)的props,對(duì)于引用值锅必,會(huì)在實(shí)例中共享事格。

2.getInitialState

作用于組件的實(shí)例,在實(shí)例創(chuàng)建時(shí)調(diào)用一次搞隐,用于初始化每個(gè)實(shí)例的state驹愚,此時(shí)可以訪問this.props。

3.componentWillMount

在完成首次渲染之前調(diào)用劣纲,此時(shí)仍可以修改組件的state逢捺。

4.render

必選的方法,創(chuàng)建虛擬DOM癞季,該方法具有特殊的規(guī)則:

只能通過this.props和this.state訪問數(shù)據(jù)
可以返回null劫瞳、false或任何React組件
只能出現(xiàn)一個(gè)頂級(jí)組件(不能返回?cái)?shù)組)
不能改變組件的狀態(tài)
不能修改DOM的輸出

5.componentDidMount

真實(shí)的DOM被渲染出來后調(diào)用棠耕,在該方法中可通過this.getDOMNode()訪問到真實(shí)的DOM元素。此時(shí)已可以使用其他類庫來操作這個(gè)DOM柠新。

注:在服務(wù)端中窍荧,該方法不會(huì)被調(diào)用。

6.componentWillReceiveProps

組件接收到新的props時(shí)調(diào)用恨憎,并將其作為參數(shù)nextProps使用蕊退,此時(shí)可以更改組件props及state。

  componentWillReceiveProps: function(nextProps) {
      if (nextProps.bool) {
          this.setState({
              bool: true
          });
      }
  }
7.shouldComponentUpdate

組件是否應(yīng)當(dāng)渲染新的props或state憔恳,返回false表示跳過后續(xù)的生命周期方法瓤荔,通常不需要使用以避免出現(xiàn)bug。在出現(xiàn)應(yīng)用的瓶頸時(shí)钥组,可通過該方法進(jìn)行適當(dāng)?shù)膬?yōu)化输硝。

注:在首次渲染期間或者調(diào)用了forceUpdate方法后,該方法不會(huì)被調(diào)用

8.componentWillUpdate

接收到新的props或者state后程梦,進(jìn)行渲染之前調(diào)用点把,此時(shí)不允許更新props或state。

9.componentDidUpdate

完成渲染新的props或者state后調(diào)用屿附,此時(shí)可以訪問到新的DOM元素郎逃。

10.componentWillUnmount

組件被移除之前被調(diào)用,可以用于做一些清理工作挺份,在componentDidMount方法中添加的所有任務(wù)都需要在該方法中撤銷褒翰,比如創(chuàng)建的定時(shí)器或添加的事件監(jiān)聽器。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末匀泊,一起剝皮案震驚了整個(gè)濱河市优训,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌各聘,老刑警劉巖揣非,帶你破解...
    沈念sama閱讀 206,482評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異伦吠,居然都是意外死亡妆兑,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,377評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門毛仪,熙熙樓的掌柜王于貴愁眉苦臉地迎上來搁嗓,“玉大人,你說我怎么就攤上這事箱靴∠俟洌” “怎么了?”我有些...
    開封第一講書人閱讀 152,762評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵衡怀,是天一觀的道長棍矛。 經(jīng)常有香客問我安疗,道長,這世上最難降的妖魔是什么够委? 我笑而不...
    開封第一講書人閱讀 55,273評(píng)論 1 279
  • 正文 為了忘掉前任荐类,我火速辦了婚禮,結(jié)果婚禮上茁帽,老公的妹妹穿的比我還像新娘玉罐。我一直安慰自己,他們只是感情好潘拨,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,289評(píng)論 5 373
  • 文/花漫 我一把揭開白布吊输。 她就那樣靜靜地躺著,像睡著了一般铁追。 火紅的嫁衣襯著肌膚如雪季蚂。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,046評(píng)論 1 285
  • 那天琅束,我揣著相機(jī)與錄音扭屁,去河邊找鬼。 笑死狰闪,一個(gè)胖子當(dāng)著我的面吹牛疯搅,可吹牛的內(nèi)容都是我干的濒生。 我是一名探鬼主播埋泵,決...
    沈念sama閱讀 38,351評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼罪治!你這毒婦竟也來了丽声?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,988評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤觉义,失蹤者是張志新(化名)和其女友劉穎雁社,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體晒骇,經(jīng)...
    沈念sama閱讀 43,476評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡霉撵,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,948評(píng)論 2 324
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了洪囤。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片徒坡。...
    茶點(diǎn)故事閱讀 38,064評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖瘤缩,靈堂內(nèi)的尸體忽然破棺而出喇完,到底是詐尸還是另有隱情,我是刑警寧澤剥啤,帶...
    沈念sama閱讀 33,712評(píng)論 4 323
  • 正文 年R本政府宣布锦溪,位于F島的核電站不脯,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏刻诊。R本人自食惡果不足惜防楷,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,261評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望则涯。 院中可真熱鬧域帐,春花似錦、人聲如沸是整。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,264評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽浮入。三九已至龙优,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間事秀,已是汗流浹背彤断。 一陣腳步聲響...
    開封第一講書人閱讀 31,486評(píng)論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留易迹,地道東北人宰衙。 一個(gè)月前我還...
    沈念sama閱讀 45,511評(píng)論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像睹欲,于是被迫代替她去往敵國和親供炼。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,802評(píng)論 2 345

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

  • 實(shí)例化首次實(shí)例化getDefaultPropsgetInitialStatecomponentWillMountr...
    以德扶人閱讀 504評(píng)論 0 51
  • 實(shí)例化 存在期 銷毀&清理期 說明 生命周期共提供了10個(gè)不同的API窘疮。1.getDefaultProps作用于組...
    一像素閱讀 143評(píng)論 0 0
  • 實(shí)例化 一個(gè)實(shí)例初次創(chuàng)建 getDefaultProps 只會(huì)被調(diào)用一次 getInitalState 每個(gè)實(shí)例調(diào)...
    wmtcore閱讀 490評(píng)論 0 0
  • 下圖詳細(xì)列述了 React 組件在整個(gè)生命周期中所涉及的方法和行為: 生命周期詳解 組件在整個(gè) ReactJS 的...
    楊慧莉閱讀 724評(píng)論 0 0
  • 目標(biāo)完成1/10啦袋哼! 6:00起,今天把碳水化物換到早晨闸衫,吃的很飽涛贯,但代價(jià)是做飯耗費(fèi)精力,吃飽以后給胃部增加壓力導(dǎo)...
    28歲的櫻桃丸子想要變身閱讀 285評(píng)論 3 2