React組件生命周期小結(jié)

相關函數(shù)

簡單地說,React Component通過其定義的幾個函數(shù)來控制組件在生命周期的各個階段的動作。
在ES6中,一個React組件是用一個class來表示的(具體可以參考官方文檔),如下:

// 定義一個TodoList的React組件,通過繼承React.Component來實現(xiàn)
class TodoList extends React.Component {
  ...
}

生命周期相關的函數(shù)有:

constructor(props, context)

構(gòu)造函數(shù),在創(chuàng)建組件的時候調(diào)用一次。

componentWillMount()

在組件掛載之前調(diào)用一次。如果在這個函數(shù)里面調(diào)用setState,本次的render函數(shù)可以看到更新后的state,并且只渲染一次。

componentDidMount()

在組件掛載之后調(diào)用一次。這個時候,子主鍵也都掛載好了,可以在這里使用refs。

componentWillReceiveProps(nextProps)

props是父組件傳遞給子組件的。父組件發(fā)生render的時候子組件就會調(diào)用componentWillReceiveProps(不管props有沒有更新,也不管父子組件之間有沒有數(shù)據(jù)交換)。

shouldComponentUpdate(nextProps, nextState)

組件掛載之后,每次調(diào)用setState后都會調(diào)用shouldComponentUpdate判斷是否需要重新渲染組件。默認返回true,需要重新render。在比較復雜的應用里,有一些數(shù)據(jù)的改變并不影響界面展示,可以在這里做判斷,優(yōu)化渲染效率。

componentWillUpdate(nextProps, nextState)

shouldComponentUpdate返回true或者調(diào)用forceUpdate之后,componentWillUpdate會被調(diào)用。

componentDidUpdate()

除了首次render之后調(diào)用componentDidMount,其它render結(jié)束之后都是調(diào)用componentDidUpdate。

componentWillMount、componentDidMount和componentWillUpdate、componentDidUpdate可以對應起來。區(qū)別在于,前者只有在掛載的時候會被調(diào)用;而后者在以后的每次更新渲染之后都會被調(diào)用。

ReactElement render()

render是一個React組件所必不可少的核心函數(shù)(上面的其它函數(shù)都不是必須的)。記住,不要在render里面修改state。

componentWillUnmount()

組件被卸載的時候調(diào)用。一般在componentDidMount里面注冊的事件需要在這里刪除。

更新方式

在react中,觸發(fā)render的有4條路徑。

以下假設shouldComponentUpdate都是按照默認返回true的方式。

首次渲染Initial Render
調(diào)用this.setState (并不是一次setState會觸發(fā)一次render,React可能會合并操作,再一次性進行render)
父組件發(fā)生更新(一般就是props發(fā)生改變,但是就算props沒有改變或者父子組件之間沒有數(shù)據(jù)交換也會觸發(fā)render)
調(diào)用this.forceUpdate
下面是我對React組件四條更新路徑地總結(jié):

http://upload-images.jianshu.io/upload_images/1814354-4bf62e54553a32b7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240

注意,如果在shouldComponentUpdate里面返回false可以提前退出更新路徑。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,698評論 6 539
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,202評論 3 426
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,742評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,580評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,297評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,688評論 1 327
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,693評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,875評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,438評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 41,183評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,384評論 1 372
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,931評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,612評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,022評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,297評論 1 292
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,093評論 3 397
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,330評論 2 377

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

  • 下面所寫的,只適合前端的React。(React也支持后端渲染,而且和前端有點小區(qū)別,不過我沒用過。) 相關函數(shù) ...
    linjinhe閱讀 177,091評論 28 208
  • 在React Native中使用組件來封裝界面模塊時,整個界面就是一個大的組件,開發(fā)過程就是不斷優(yōu)化和拆分界面組件...
    ITxiansheng閱讀 946評論 1 2
  • 原教程內(nèi)容詳見精益 React 學習指南,這只是我在學習過程中的一些閱讀筆記,個人覺得該教程講解深入淺出,比目前大...
    leonaxiong閱讀 2,851評論 1 18
  • 在React Native中使用組件來封裝界面模塊時,整個界面就是一個大的組件,開發(fā)過程就是不斷優(yōu)化和拆分界面組件...
    朱_源浩閱讀 8,976評論 6 38
  • 近日最慘烈的事 莫過于 搬180多斤的快遞上7樓 快遞箱高約1米5寬40公分 單是從快遞檔口拿出快遞 經(jīng)已感到吃力...
    盧一定閱讀 346評論 0 0