資訊專欄INFORMATION COLUMN
摘要：為防止一些潛在的，該方法默認(rèn)總是返回。如果你確定及改變后不需要渲染組件，那么也可以指定返回，需要注意的是，這樣的結(jié)果會(huì)導(dǎo)致后面的都不會(huì)被調(diào)用。
本文由云+社區(qū)發(fā)表1.七個(gè)可選的生命周期作者：前端林子
可以結(jié)合下圖來看：
(1) componentWillMount() 僅在render()方法前被調(diào)用一次，如果在該方法中調(diào)用了setState方法去改變組件的狀態(tài)值，那么調(diào)用render()后，將會(huì)直接看到改變過了的狀態(tài)值，并且不論狀態(tài)值怎么改變，componentWillMount()都不會(huì)再被調(diào)用。
(2) componentDidMount() 僅在render()方法后被立即調(diào)用一次（客戶端），相對(duì)于父組件而言，該方法在子組件中會(huì)先被調(diào)用。如果需要使用一些JaveScript框架或者類似于setInterval()這樣的方法，建議在該方法內(nèi)使用。
(3) ShouldComponentUpdate(object nextProps, object nextState) 在初始渲染調(diào)用render()方法時(shí)不會(huì)被調(diào)用，后面在接受到新的state或者props時(shí)，在render()方法前被調(diào)用。為防止一些潛在的bug，該方法默認(rèn)總是返回true。如果你確定state及props改變后不需要渲染組件，那么也可以指定返回false，需要注意的是，這樣的結(jié)果會(huì)導(dǎo)致后面的render()、componentWillUpdate()、componentDidUpdate()都不會(huì)被調(diào)用。
一般的，我們可以通過該函數(shù)來優(yōu)化性能：
一個(gè)React項(xiàng)目需要更新一個(gè)小組件時(shí)，很可能需要父組件更新自己的狀態(tài)。而一個(gè)父組件的重新更新會(huì)造成它旗下所有的子組件重新執(zhí)行render()方法，形成新的虛擬DOM，再用diff算法對(duì)新舊虛擬DOM進(jìn)行結(jié)構(gòu)和屬性的比較，決定組件是否需要重新渲染
無疑這樣的操作會(huì)造成很多的性能浪費(fèi)，所以我們開發(fā)者可以根據(jù)項(xiàng)目的業(yè)務(wù)邏輯，在shouldComponentUpdate()中加入條件判斷，從而優(yōu)化性能
例如React中的就提供了一個(gè)PureComponent的類，當(dāng)我們的組件繼承于它時(shí)，組件更新時(shí)就會(huì)默認(rèn)先比較新舊屬性和狀態(tài)，從而決定組件是否更新。值得注意的是，PureComponent進(jìn)行的是淺比較，所以組件狀態(tài)或?qū)傩愿淖儠r(shí)，都需要返回一個(gè)新的對(duì)象或數(shù)組
(4) componentWillReceiveProps(object nextProps) 在初始渲染調(diào)用render()方法時(shí)不會(huì)被調(diào)用，當(dāng)接收到一個(gè)新的props時(shí)，該方法被調(diào)用。我們都知道，如果改變一個(gè)狀態(tài)的值，則會(huì)觸發(fā)render()方法，所以可以在這個(gè)方法里調(diào)用setState()方法去改變一個(gè)狀態(tài)的值，當(dāng)該方法接收到新的props時(shí)，setState()就可以避免一次額外的render()了。 在這個(gè)方法里，尤其需要注意一點(diǎn)，就是接收到新的props一定會(huì)觸發(fā)render()方法，但是render()方法被觸發(fā)不一定是因?yàn)榻邮盏搅诵碌膒rops
(5) componentWillUpdate(object nextProps, object nextState) 在初始渲染調(diào)用render()方法時(shí)不會(huì)被調(diào)用，當(dāng)接收到新的props及state時(shí)，在render()方法之前被調(diào)用。
不要在此方法再去更新props 或者 state
(6) componentDidUpdate(object prevProps, object prevState) 在初始渲染調(diào)用render()方法時(shí)不會(huì)被調(diào)用，當(dāng)組件更新被刷新到DOM之后被立即調(diào)用。
可以在這里訪問，并修改 DOM
(7) componentWillUnmount() 在組件從DOM上卸載前被調(diào)用，在這個(gè)方法里面，我們主要是完成一些清除操作，比如說清除掉一些過時(shí)了的定時(shí)器等。
2.執(zhí)行順序及次數(shù)(1) getDefaultProps()，調(diào)用1次
(2) getInitialState()，調(diào)用1次
(3) componentWillMount()，調(diào)用1次
(4) render()，調(diào)用>=1次
(5) componentDidMount()：僅客戶端，調(diào)用1次
(6) componentWillReceiveProps(object nextProps)，調(diào)用>=0次
(7) ShouldComponentUpdate(object nextProps, object nextState)，調(diào)用>=0次
(8) componentWillUpdate(object nextProps, object nextState)，調(diào)用>=0次
(9) render()，調(diào)用>=1次
(10) componentDidUpdate(object prevProps, object prevState)，調(diào)用>=0次
(11) componentWillUnmount()，調(diào)用1次
3.實(shí)例我寫了一個(gè)小demo可直接在瀏覽器里運(yùn)行，大家可以通過控制臺(tái)查看父組件、子組件中的各生命周期調(diào)用的順序：
點(diǎn)擊一次按鈕，通過控制臺(tái)可以看到：
4.小結(jié)本文主要是圖文結(jié)合地介紹了react的生命周期及執(zhí)行順序，同時(shí)附上了一個(gè)實(shí)例，可以清楚地看到父組件、子組件的調(diào)用順序。如存在問題，歡迎指正~~~
此文已由騰訊云+社區(qū)在各渠道發(fā)布
獲取更多新鮮技術(shù)干貨，可以關(guān)注我們騰訊云技術(shù)社區(qū)-云加社區(qū)官方號(hào)及知乎機(jī)構(gòu)號(hào)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/101660.html
摘要：不同于個(gè)人面經(jīng)，這份面經(jīng)具有普適性。我在前面的文章中也提到了應(yīng)該怎么做自我介紹與項(xiàng)目介紹，詳情可以查看這篇文章備戰(zhàn)春招秋招系列初出茅廬的程序員該如何準(zhǔn)備面試。是建立連接時(shí)使用的握手信號(hào)。它表示確認(rèn)發(fā)來的數(shù)據(jù)已經(jīng)接受無誤。 showImg(https://segmentfault.com/img/remote/1460000016972448?w=921&h=532); 該文已加入開源文...
摘要：基礎(chǔ)問題的的性能及原理之區(qū)別詳解備忘筆記深入理解流水線抽象關(guān)鍵字修飾符知識(shí)點(diǎn)總結(jié)必看篇中的關(guān)鍵字解析回調(diào)機(jī)制解讀抽象類與三大特征時(shí)間和時(shí)間戳的相互轉(zhuǎn)換為什么要使用內(nèi)部類對(duì)象鎖和類鎖的區(qū)別，，優(yōu)缺點(diǎn)及比較提高篇八詳解內(nèi)部類單例模式和 Java基礎(chǔ)問題 String的+的性能及原理 java之yield(),sleep(),wait()區(qū)別詳解-備忘筆記 深入理解Java Stream流水...
摘要：基礎(chǔ)問題的的性能及原理之區(qū)別詳解備忘筆記深入理解流水線抽象關(guān)鍵字修飾符知識(shí)點(diǎn)總結(jié)必看篇中的關(guān)鍵字解析回調(diào)機(jī)制解讀抽象類與三大特征時(shí)間和時(shí)間戳的相互轉(zhuǎn)換為什么要使用內(nèi)部類對(duì)象鎖和類鎖的區(qū)別，，優(yōu)缺點(diǎn)及比較提高篇八詳解內(nèi)部類單例模式和 Java基礎(chǔ)問題 String的+的性能及原理 java之yield(),sleep(),wait()區(qū)別詳解-備忘筆記 深入理解Java Stream流水...
摘要：基礎(chǔ)問題的的性能及原理之區(qū)別詳解備忘筆記深入理解流水線抽象關(guān)鍵字修飾符知識(shí)點(diǎn)總結(jié)必看篇中的關(guān)鍵字解析回調(diào)機(jī)制解讀抽象類與三大特征時(shí)間和時(shí)間戳的相互轉(zhuǎn)換為什么要使用內(nèi)部類對(duì)象鎖和類鎖的區(qū)別，，優(yōu)缺點(diǎn)及比較提高篇八詳解內(nèi)部類單例模式和 Java基礎(chǔ)問題 String的+的性能及原理 java之yield(),sleep(),wait()區(qū)別詳解-備忘筆記 深入理解Java Stream流水...
閱讀 3454·2021-11-22 12:00
閱讀 671·2019-08-29 13:24
閱讀 2905·2019-08-29 11:31
閱讀 2587·2019-08-26 14:00
閱讀 3185·2019-08-26 11:42
閱讀 2476·2019-08-23 18:31
閱讀 798·2019-08-23 18:27
閱讀 2844·2019-08-23 16:58
