React 適合0基礎教程快速上手 React組件的生命周期(必須掌握) 創(chuàng)建期(五個階段)

getDefaultProps(獲取默認屬性)

作用于組件類极祸,只調(diào)用一次慈格,返回對象用于設置默認的props,對于引用值遥金,會在實例中共享浴捆。

getInitialState(獲取默認狀態(tài))

作用于組件的實例,在實例創(chuàng)建時調(diào)用一次稿械,用于初始化每個實例的state选泻,此時可以訪問this.props。

componentWillMount(組件將要構(gòu)建)

在完成首次渲染之前調(diào)用,此時仍可以修改組件的state页眯。

render(組件渲染輸出虛擬dom)

必選的方法梯捕,創(chuàng)建虛擬DOM,該方法具有特殊的規(guī)則:只能通過this.props和this.state訪問數(shù)據(jù)可以返回null窝撵、false或任何React組件只能出現(xiàn)一個頂級組件(不能返回數(shù)組)不能改變組件的狀態(tài) * 不能修改DOM的輸出

componentDidMount(組件渲染完成)

真實的DOM被渲染出來后調(diào)用傀顾,在該方法中可通過this.getDOMNode()(也可以ReactDOM.findDOMNode(this))訪問到真實的DOM元素。此時已可以使用其他類庫來操作這個DOM碌奉。(在服務端中短曾,該方法不會被調(diào)用)

存在期 (五個階段)

componentWillReceiveProps(接受新的屬性)

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

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

shouldComponentUpdate(組建是否應該更新)

**必須有返回值(return false/true)

第一個參數(shù)是新屬性

第二個參數(shù)是新狀態(tài)

組件是否應當渲染新的props或state,返回false表示跳過后續(xù)的生命周期方法隆豹,通常不需要使用以避免出現(xiàn)bug椭岩。在出現(xiàn)應用的瓶頸時,可通過該方法進行適當?shù)膬?yōu)化璃赡。

componentWillUpdate(組件將要被更新)

第一個參數(shù)是新屬性

第二個參數(shù)是新狀態(tài)

接收到新的props或者state后判哥,進行渲染之前調(diào)用,此時不允許更新props或state碉考。

render(組件更新輸出dom)

沒有參數(shù) 這個階段訪問的都是舊的虛擬dom 只有之后的一個階段訪問的才是新的虛擬dom

componentDidUpdate(組件更新完成)

完成渲染新的props或者state后調(diào)用塌计,此時可以訪問到新的DOM元素。

銷毀期componentWillUnmount

組件被移除之前被調(diào)用侯谁,可以用于做一些清理工作锌仅,在componentDidMount方法中添加的所有任務都需要在該方法中撤銷,比如創(chuàng)建的定時器或添加的事件監(jiān)聽器墙贱。

(如有雷同热芹,純屬巧合,幫忙點個贊拜2移病R僚А!)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末魁衙,一起剝皮案震驚了整個濱河市报腔,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌剖淀,老刑警劉巖纯蛾,帶你破解...
    沈念sama閱讀 216,591評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異纵隔,居然都是意外死亡翻诉,警方通過查閱死者的電腦和手機帆卓,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,448評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來米丘,“玉大人,你說我怎么就攤上這事糊啡≈舨椋” “怎么了?”我有些...
    開封第一講書人閱讀 162,823評論 0 353
  • 文/不壞的土叔 我叫張陵棚蓄,是天一觀的道長堕扶。 經(jīng)常有香客問我,道長梭依,這世上最難降的妖魔是什么稍算? 我笑而不...
    開封第一講書人閱讀 58,204評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮役拴,結(jié)果婚禮上糊探,老公的妹妹穿的比我還像新娘。我一直安慰自己河闰,他們只是感情好科平,可當我...
    茶點故事閱讀 67,228評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著姜性,像睡著了一般瞪慧。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上部念,一...
    開封第一講書人閱讀 51,190評論 1 299
  • 那天弃酌,我揣著相機與錄音,去河邊找鬼儡炼。 笑死妓湘,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的射赛。 我是一名探鬼主播多柑,決...
    沈念sama閱讀 40,078評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼楣责!你這毒婦竟也來了竣灌?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,923評論 0 274
  • 序言:老撾萬榮一對情侶失蹤秆麸,失蹤者是張志新(化名)和其女友劉穎初嘹,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體沮趣,經(jīng)...
    沈念sama閱讀 45,334評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡屯烦,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,550評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片驻龟。...
    茶點故事閱讀 39,727評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡温眉,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出翁狐,到底是詐尸還是另有隱情类溢,我是刑警寧澤,帶...
    沈念sama閱讀 35,428評論 5 343
  • 正文 年R本政府宣布露懒,位于F島的核電站闯冷,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏懈词。R本人自食惡果不足惜蛇耀,卻給世界環(huán)境...
    茶點故事閱讀 41,022評論 3 326
  • 文/蒙蒙 一延刘、第九天 我趴在偏房一處隱蔽的房頂上張望恃锉。 院中可真熱鬧褂策,春花似錦祷嘶、人聲如沸歧匈。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,672評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽帕棉。三九已至褐桌,卻和暖如春衰抑,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背荧嵌。 一陣腳步聲響...
    開封第一講書人閱讀 32,826評論 1 269
  • 我被黑心中介騙來泰國打工呛踊, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人啦撮。 一個月前我還...
    沈念sama閱讀 47,734評論 2 368
  • 正文 我出身青樓谭网,卻偏偏與公主長得像,于是被迫代替她去往敵國和親赃春。 傳聞我的和親對象是個殘疾皇子愉择,可洞房花燭夜當晚...
    茶點故事閱讀 44,619評論 2 354

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