react生命周期理解

Paste_Image.png

1、getIntialState()方法
這個方法在組件沒有mouting之前調用推掸,在這個方法中可以初始化一些數(shù)據(jù),例如state登渣。這個方法在組件創(chuàng)建的時候調用一次毡泻,之后就不會再被調用了,除非組件銷毀呻顽,重新創(chuàng)建丹墨。
在這個方法中已經可以訪問到this.props了带到。

getDefaultProps()方法

作用于組件類,只調用一次揽惹,返回對象用于設置默認的props,對于引用值狭握,會在實例中共享疯溺。

2囱嫩、componentWillMount()方法
這個方法在組件已經即將創(chuàng)建但是還沒有創(chuàng)建的時候調用,在這里可以用setState修改state今妄。但是react建議是在組件mouted以后調用setState函數(shù)鸳碧,否則容易報警告。這點在介紹state的時候在詳細分析腾仅。

3套利、render方法
這個方法是react組件唯一必需的函數(shù)鹤耍,這個方法用于創(chuàng)建虛擬DOM吹艇。
這個方法里數(shù)據(jù)只能通過this.state和this.props輸出。
要注意一點返回的組件必須有一個頂級的組件昂拂,也就是說所有的標簽必須被一個父標簽包裹受神。

4、componentDidMount()方法
組件真正在被裝載之后格侯,可以修改DOM
這個方法中可以調用Rect.findDOMNode()方法鼻听,訪問Dom節(jié)點(注:在react 0.13版本中用this.getDOMNode()方法而且返回的是虛擬DOM,不能直接訪問DOM節(jié)點)
訪問DOM節(jié)點時联四,react 提供了refs對象撑碴,可以同個refs對象直接訪問到相應的節(jié)點上:
例如:
<div ref='app'></div>
可以通過Rect.findDOMNode(this.refs.app)直接訪問到div節(jié)點

5.componentWillReceiveProps
組件接收到新的props時調用,并將其作為參數(shù)nextProps使用朝墩,此時可以更改組件props及state醉拓。
componentWillReceiveProps: function(nextProps) {
console.log(this.props.color);//原來的顏色
console.log(nextProps.color);//將要變成的顏色
}

6.shouldComponentUpdate
組件是否應當渲染新的props或state,返回false表示跳過后續(xù)的生命周期方法收苏,通常不需要使用以避免出現(xiàn)bug。在出現(xiàn)應用的瓶頸時鹿霸,可通過該方法進行適當?shù)膬?yōu)化排吴。
在首次渲染期間或者調用了forceUpdate方法后,該方法不會被調用
shouldComponentUpdate:function (nextProps,nextState) {
console.log(nextProps,'nextProps');
console.log(nextState,'nextState');
return false;
}

7.componentWillUpdate
接收到新的props或者state后懦鼠,進行渲染之前調用钻哩,此時不允許更新props或state。

8.componentDidUpdate
完成渲染新的props或者state后調用肛冶,此時可以訪問到新的DOM元素街氢。

9.componentWillUnmount
組件被移除之前被調用,可以用于做一些清理工作睦袖,在componentDidMount方法中添加的所有任務都需要在該方法中撤銷阳仔,比如創(chuàng)建的定時器或添加的事件監(jiān)聽器。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末扣泊,一起剝皮案震驚了整個濱河市近范,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌延蟹,老刑警劉巖评矩,帶你破解...
    沈念sama閱讀 210,978評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異阱飘,居然都是意外死亡斥杜,警方通過查閱死者的電腦和手機虱颗,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,954評論 2 384
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蔗喂,“玉大人忘渔,你說我怎么就攤上這事$侄” “怎么了畦粮?”我有些...
    開封第一講書人閱讀 156,623評論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長乖阵。 經常有香客問我宣赔,道長,這世上最難降的妖魔是什么瞪浸? 我笑而不...
    開封第一講書人閱讀 56,324評論 1 282
  • 正文 為了忘掉前任儒将,我火速辦了婚禮,結果婚禮上对蒲,老公的妹妹穿的比我還像新娘钩蚊。我一直安慰自己,他們只是感情好蹈矮,可當我...
    茶點故事閱讀 65,390評論 5 384
  • 文/花漫 我一把揭開白布两疚。 她就那樣靜靜地躺著,像睡著了一般含滴。 火紅的嫁衣襯著肌膚如雪诱渤。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,741評論 1 289
  • 那天谈况,我揣著相機與錄音勺美,去河邊找鬼。 笑死碑韵,一個胖子當著我的面吹牛赡茸,可吹牛的內容都是我干的。 我是一名探鬼主播祝闻,決...
    沈念sama閱讀 38,892評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼占卧,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了联喘?” 一聲冷哼從身側響起华蜒,我...
    開封第一講書人閱讀 37,655評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎豁遭,沒想到半個月后叭喜,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 44,104評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡蓖谢,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年捂蕴,在試婚紗的時候發(fā)現(xiàn)自己被綠了譬涡。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,569評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡啥辨,死狀恐怖涡匀,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情溉知,我是刑警寧澤陨瘩,帶...
    沈念sama閱讀 34,254評論 4 328
  • 正文 年R本政府宣布,位于F島的核電站着倾,受9級特大地震影響拾酝,放射性物質發(fā)生泄漏燕少。R本人自食惡果不足惜卡者,卻給世界環(huán)境...
    茶點故事閱讀 39,834評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望客们。 院中可真熱鬧崇决,春花似錦、人聲如沸底挫。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,725評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽建邓。三九已至盈厘,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間官边,已是汗流浹背沸手。 一陣腳步聲響...
    開封第一講書人閱讀 31,950評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留注簿,地道東北人契吉。 一個月前我還...
    沈念sama閱讀 46,260評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像诡渴,于是被迫代替她去往敵國和親捐晶。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,446評論 2 348

推薦閱讀更多精彩內容