談?wù)剰?開始快速學(xué)習(xí)React Native(二)

React Native生命周期

ReactNative生命周期圖

各個函數(shù)的介紹:

getDefaultProps:

在組件創(chuàng)建之前毕源,會先調(diào)用 getDefaultProps() 跪妥,這是全局調(diào)用一次,嚴(yán)格地來說,這不是組件的生命周期的一部分卡乾。在組件被創(chuàng)建并加載候夭苗,首先調(diào)用 getInitialState() 信卡,來初始化組件的狀態(tài)。
設(shè)置組件屬性的默認(rèn)值题造,在組件類創(chuàng)建的時(shí)候調(diào)用一次傍菇,然后返回值被緩存下來。如果父組件沒有指定 `props` 中的某個鍵界赔,則此處返回的對象中的相應(yīng)屬性將會合并到 `this.props` (使用 in 檢測屬性)丢习。

注意:
該方法在任何實(shí)例創(chuàng)建之前調(diào)用,因此不能依賴于 this.props淮悼。另外咐低,getDefaultProps() 返回的任何復(fù)雜對象將會在實(shí)例間共享,而不是每個實(shí)例擁有一份拷貝袜腥。通常用于為組件初始化默認(rèn)屬性见擦。

getInitialState

object getInitialState()
初始化組件狀態(tài),在組件掛載之前調(diào)用一次。返回值將會作為 this.state的初始值鲤屡。

注意:通常在該方法中對組件的狀態(tài)進(jìn)行初始化儡湾。
一般我們都會使用this.state.XX獲取當(dāng)前狀態(tài)的值,使用this.setState({key:value})來改變狀態(tài)执俩。

componentWillMount

這個函數(shù)調(diào)用時(shí)機(jī)是在組件創(chuàng)建徐钠,并初始化了狀態(tài)之后,在第一次繪制 render() 之前役首〕⒇ぃ可以在這里做一些業(yè)務(wù)初始化操作和一次消耗內(nèi)存的操作,也可以設(shè)置組件狀態(tài)衡奥。

注意:這個函數(shù)在整個生命周期中只被調(diào)用一次,也是在渲染之前唯一一次能夠改變state的一個函數(shù)爹袁。

render

ReactComponent render()
render() 方法是必須的。
當(dāng)該方法被回調(diào)的時(shí)候矮固,會檢測 this.propsthis.state失息,并返回一個單子級組件。該子級組件可以是虛擬的本地 DOM 組件(比如 <div /> 或者 React.DOM.div())档址,也可以是自定義的復(fù)合組件盹兢。
你也可以返回 null 或者 false 來表明不需要渲染任何東西。實(shí)際上守伸,React 渲染一個<noscript>標(biāo)簽來處理當(dāng)前的差異檢查邏輯绎秒。當(dāng)返回 null 或者 false 的時(shí)候,this.getDOMNode() 將返回 null尼摹。
render()函數(shù)應(yīng)該是純粹的见芹,也就是說該函數(shù)不修改組件的 state,每次調(diào)用都返回相同的結(jié)果蠢涝,不讀寫 DOM 信息玄呛,也不和瀏覽器交互(例如通過使用 setTimeout)。如果需要和瀏覽器交互和二,在 componentDidMount() 中或者其它生命周期方法中做這件事徘铝。保持 render() 純粹,可以使服務(wù)器端渲染更加切實(shí)可行儿咱,也使組件更容易被理解庭砍。

注意:不要在render()函數(shù)中做復(fù)雜的操作场晶,更不要進(jìn)行網(wǎng)絡(luò)請求混埠,數(shù)據(jù)庫讀寫,I/O等操作诗轻。

componentDidMount

在組件第一次繪制之后钳宪,會調(diào)用 componentDidMount() ,通知組件已經(jīng)加載完成。這個函數(shù)調(diào)用的時(shí)候吏颖,其虛擬 DOM 已經(jīng)構(gòu)建完成搔体,你可以在這個函數(shù)開始獲取其中的元素或者子組件了。需要注意的是半醉,RN 框架是先調(diào)用子組件的 componentDidMount() 疚俱,然后調(diào)用父組件的函數(shù)。從這個函數(shù)開始缩多,就可以和 JS 其他框架交互了呆奕,例如設(shè)置計(jì)時(shí) setTimeout 或者 setInterval ,或者發(fā)起網(wǎng)絡(luò)請求衬吆。

注意:這個函數(shù)也是只被調(diào)用一次梁钾。這個函數(shù)之后,就進(jìn)入了穩(wěn)定運(yùn)行狀態(tài)逊抡,等待事件觸發(fā)姆泻。

componentWillReceiveProps

在組件接收到新的 props 的時(shí)候調(diào)用componentWillReceiveProps() 。在初始化渲染的時(shí)候冒嫡,該方法不會調(diào)用拇勃。
用此函數(shù)可以作為 react 在 prop 傳入之后, render() 渲染之前更新 state 的機(jī)會孝凌。老的 props 可以通過 this.props 獲取到潜秋。在該函數(shù)中調(diào)用 this.setState() 將不會引起第二次渲染。

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

注意:
這里調(diào)用更新狀態(tài)是安全的胎许,并不會觸發(fā)額外的 render() 調(diào)用峻呛。

shouldComponentUpdate

shouldComponentUpdate(object nextProps, object nextState): 在接收到新的 props 或者 state,將要渲染之前調(diào)用辜窑,該方法在初始化渲染的時(shí)候不會調(diào)用钩述,在使用 forceUpdate 方法的時(shí)候也不會。如果確定新的 props 和 state 不會導(dǎo)致組件更新穆碎,則此處應(yīng)該 返回 false牙勘。

注意:重寫次方你可以根據(jù)實(shí)際情況,來靈活的控制組件當(dāng) props 和 state 發(fā)生變化時(shí)是否要重新渲染組件所禀。

componentWillUpdate

componentWillUpdate(object nextProps, object nextState):在接收到新的 props 或者 state 之前立刻調(diào)用方面。在初始化渲染的時(shí)候該方法不會被調(diào)用。使用該方法做一些更新之前的準(zhǔn)備工作色徘。

注意:你不能在該方法中使用 this.setState()恭金。如果需要更新 state 來響應(yīng)某個 prop 的改變,請使用 componentWillReceiveProps褂策。

componentDidUpdate

componentDidUpdate(object prevProps, object prevState): 在組件的更新已經(jīng)同步到 DOM 中之后立刻被調(diào)用横腿。

注意:該方法不會在初始化渲染的時(shí)候調(diào)用颓屑。使用該方法可以在組件更新之后操作 DOM 元素。

componentWillUnmount

componentWillUnmount:在組件從 DOM 中移除的時(shí)候立刻被調(diào)用耿焊。

注意:在該方法中執(zhí)行任何必要的清理揪惦,比如無效的定時(shí)器,或者清除在 componentDidMount 中創(chuàng)建的 DOM 元素罗侯。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末器腋,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子钩杰,更是在濱河造成了極大的恐慌蒂培,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件榜苫,死亡現(xiàn)場離奇詭異护戳,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)垂睬,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進(jìn)店門媳荒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人驹饺,你說我怎么就攤上這事钳枕。” “怎么了赏壹?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵鱼炒,是天一觀的道長。 經(jīng)常有香客問我蝌借,道長昔瞧,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任菩佑,我火速辦了婚禮自晰,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘稍坯。我一直安慰自己酬荞,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布瞧哟。 她就那樣靜靜地躺著混巧,像睡著了一般。 火紅的嫁衣襯著肌膚如雪勤揩。 梳的紋絲不亂的頭發(fā)上咧党,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天,我揣著相機(jī)與錄音雄可,去河邊找鬼凿傅。 笑死,一個胖子當(dāng)著我的面吹牛数苫,可吹牛的內(nèi)容都是我干的聪舒。 我是一名探鬼主播,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼虐急,長吁一口氣:“原來是場噩夢啊……” “哼箱残!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起止吁,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤被辑,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后敬惦,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體盼理,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年俄删,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了宏怔。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡畴椰,死狀恐怖臊诊,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情斜脂,我是刑警寧澤抓艳,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站帚戳,受9級特大地震影響玷或,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜片任,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一庐椒、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧蚂踊,春花似錦约谈、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至涝动,卻和暖如春迈勋,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背醋粟。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工靡菇, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留重归,地道東北人。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓厦凤,卻偏偏與公主長得像鼻吮,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子较鼓,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,922評論 2 361

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

  • React Native是基于React的椎木,在開發(fā)React Native過程中少不了的需要用到React方面的知...
    亓凡閱讀 1,479評論 1 4
  • 原教程內(nèi)容詳見精益 React 學(xué)習(xí)指南,這只是我在學(xué)習(xí)過程中的一些閱讀筆記博烂,個人覺得該教程講解深入淺出香椎,比目前大...
    leonaxiong閱讀 2,843評論 1 18
  • 安裝: 概述 React起源于FaceBook的內(nèi)部項(xiàng)目,因?yàn)樵摴緦κ袌錾纤械腏avaScript MVC框架...
    姒沝無痕閱讀 722評論 0 0
  • Learn from React 官方文檔 一、Rendering Elements 1. Rendering a...
    恰皮閱讀 2,671評論 2 3
  • 十幾年前禽篱,剛參加工作的時(shí)候認(rèn)識了一個人畜伐,我給他起了個名字——圣舟,他說自己有名字躺率,為什么我要這么叫他烤礁,我笑而不答,...
    尊敬的王二閱讀 749評論 10 13