React Native 生命周期全面解析

生命周期分析圖

getDefaultProps

object getDefaultProps()

執(zhí)行過(guò)一次后,被創(chuàng)建的類(lèi)會(huì)有緩存豁陆,映射的值會(huì)存在this.props,前提是這個(gè)prop不是父組件指定的
這個(gè)方法在對(duì)象被創(chuàng)建之前執(zhí)行,因此不能在方法內(nèi)調(diào)用this.props ,另外炫掐,注意任何getDefaultProps()返回的對(duì)象在實(shí)例中共享,不是復(fù)制
設(shè)置訪問(wèn)屬性為true

getInitialState

object getInitialState()

控件加載之前執(zhí)行睬涧,返回值會(huì)被用于state的初始化值

componentWillMount

void componentWillMount()

執(zhí)行一次募胃,在初始化render之前執(zhí)行旗唁,如果在這個(gè)方法內(nèi)調(diào)用setState,render()知道state發(fā)生變化痹束,并且只執(zhí)行一次

render

ReactElement render()

render的時(shí)候會(huì)調(diào)用render()會(huì)被調(diào)用
調(diào)用render()方法時(shí)检疫,首先檢查this.props和this.state返回一個(gè)子元素,子元素可以是DOM組件或者其他自定義復(fù)合控件的虛擬實(shí)現(xiàn)
如果不想渲染可以返回null或者false祷嘶,這種場(chǎng)景下电谣,react渲染一個(gè)<noscript>標(biāo)簽,當(dāng)返回null或者false時(shí)抹蚀,ReactDOM.findDOMNode(this)返回null
render()方法是很純凈的剿牺,這就意味著不要在這個(gè)方法里初始化組件的state,每次執(zhí)行時(shí)返回相同的值环壤,不會(huì)讀寫(xiě)DOM或者與服務(wù)器交互晒来,如果必須如服務(wù)器交互,在componentDidMount()方法中實(shí)現(xiàn)或者其他生命周期的方法中實(shí)現(xiàn)郑现,保持render()方法純凈使得服務(wù)器更準(zhǔn)確湃崩,組件更簡(jiǎn)單

componentDidMount

void componentDidMount()

在初始化render之后只執(zhí)行一次,在這個(gè)方法內(nèi)接箫,可以訪問(wèn)任何組件攒读,componentDidMount()方法中的子組件在父組件之前執(zhí)行

從這個(gè)函數(shù)開(kāi)始,就可以和 js 其他框架交互了辛友,例如設(shè)置計(jì)時(shí) setTimeout 或者 setInterval薄扁,或者發(fā)起網(wǎng)絡(luò)請(qǐng)求

shouldComponentUpdate

boolean shouldComponentUpdate(
  object nextProps, object nextState
)

這個(gè)方法在初始化render時(shí)不會(huì)執(zhí)行,當(dāng)props或者state發(fā)生變化時(shí)執(zhí)行废累,并且是在render之前邓梅,當(dāng)新的props或者state不需要更新組件時(shí),返回false

shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id;
}

當(dāng)shouldComponentUpdate方法返回false時(shí)邑滨,講不會(huì)執(zhí)行render()方法日缨,componentWillUpdate和componentDidUpdate方法也不會(huì)被調(diào)用

默認(rèn)情況下,shouldComponentUpdate方法返回true防止state快速變化時(shí)的問(wèn)題掖看,但是如果·state不變匣距,props只讀,可以直接覆蓋shouldComponentUpdate用于比較props和state的變化哎壳,決定UI是否更新毅待,當(dāng)組件比較多時(shí),使用這個(gè)方法能有效提高應(yīng)用性能

componentWillUpdate

void componentWillUpdate(
  object nextProps, object nextState
)

當(dāng)props和state發(fā)生變化時(shí)執(zhí)行耳峦,并且在render方法之前執(zhí)行恩静,當(dāng)然初始化render時(shí)不執(zhí)行該方法,需要特別注意的是,在這個(gè)函數(shù)里面驶乾,你就不能使用this.setState來(lái)修改狀態(tài)邑飒。這個(gè)函數(shù)調(diào)用之后,就會(huì)把nextProps和nextState分別設(shè)置到this.props和this.state中级乐。緊接著這個(gè)函數(shù)疙咸,就會(huì)調(diào)用render()來(lái)更新界面了

componentDidUpdate

void componentDidUpdate(
  object prevProps, object prevState
)

組件更新結(jié)束之后執(zhí)行,在初始化render時(shí)不執(zhí)行

componentWillReceiveProps

void componentWillReceiveProps(
  object nextProps
)

當(dāng)props發(fā)生變化時(shí)執(zhí)行风科,初始化render時(shí)不執(zhí)行撒轮,在這個(gè)回調(diào)函數(shù)里面,你可以根據(jù)屬性的變化贼穆,通過(guò)調(diào)用this.setState()來(lái)更新你的組件狀態(tài)题山,舊的屬性還是可以通過(guò)this.props來(lái)獲取,這里調(diào)用更新?tīng)顟B(tài)是安全的,并不會(huì)觸發(fā)額外的render調(diào)用

componentWillReceiveProps: function(nextProps) {
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}

componentWillUnmount

void componentWillUnmount()

當(dāng)組件要被從界面上移除的時(shí)候故痊,就會(huì)調(diào)用componentWillUnmount(),在這個(gè)函數(shù)中顶瞳,可以做一些組件相關(guān)的清理工作,例如取消計(jì)時(shí)器愕秫、網(wǎng)絡(luò)請(qǐng)求等

總結(jié)

ReactNative的生命周期就介紹完了慨菱,其中最上面的虛線框和右下角的虛線框的方法一定會(huì)執(zhí)行,左下角的方法根據(jù)props state是否變化去執(zhí)行戴甩,其中建議只有在componentWillMount,componentDidMount,componentWillReceiveProps方法中可以修改state值

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末符喝,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子甜孤,更是在濱河造成了極大的恐慌协饲,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,378評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件课蔬,死亡現(xiàn)場(chǎng)離奇詭異囱稽,居然都是意外死亡郊尝,警方通過(guò)查閱死者的電腦和手機(jī)二跋,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)流昏,“玉大人扎即,你說(shuō)我怎么就攤上這事】隽梗” “怎么了谚鄙?”我有些...
    開(kāi)封第一講書(shū)人閱讀 152,702評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)刁绒。 經(jīng)常有香客問(wèn)我闷营,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,259評(píng)論 1 279
  • 正文 為了忘掉前任傻盟,我火速辦了婚禮速蕊,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘娘赴。我一直安慰自己规哲,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,263評(píng)論 5 371
  • 文/花漫 我一把揭開(kāi)白布诽表。 她就那樣靜靜地躺著唉锌,像睡著了一般。 火紅的嫁衣襯著肌膚如雪竿奏。 梳的紋絲不亂的頭發(fā)上袄简,一...
    開(kāi)封第一講書(shū)人閱讀 49,036評(píng)論 1 285
  • 那天,我揣著相機(jī)與錄音泛啸,去河邊找鬼痘番。 笑死,一個(gè)胖子當(dāng)著我的面吹牛平痰,可吹牛的內(nèi)容都是我干的汞舱。 我是一名探鬼主播,決...
    沈念sama閱讀 38,349評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼宗雇,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼昂芜!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起赔蒲,我...
    開(kāi)封第一講書(shū)人閱讀 36,979評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤泌神,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后舞虱,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體欢际,經(jīng)...
    沈念sama閱讀 43,469評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,938評(píng)論 2 323
  • 正文 我和宋清朗相戀三年矾兜,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了损趋。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,059評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡椅寺,死狀恐怖浑槽,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情返帕,我是刑警寧澤桐玻,帶...
    沈念sama閱讀 33,703評(píng)論 4 323
  • 正文 年R本政府宣布,位于F島的核電站荆萤,受9級(jí)特大地震影響镊靴,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,257評(píng)論 3 307
  • 文/蒙蒙 一偏竟、第九天 我趴在偏房一處隱蔽的房頂上張望算行。 院中可真熱鬧,春花似錦苫耸、人聲如沸州邢。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,262評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)量淌。三九已至,卻和暖如春嫌褪,著一層夾襖步出監(jiān)牢的瞬間呀枢,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,485評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工笼痛, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留裙秋,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,501評(píng)論 2 354
  • 正文 我出身青樓缨伊,卻偏偏與公主長(zhǎng)得像摘刑,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子刻坊,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,792評(píng)論 2 345

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