react元件的生命週期函式如下圖所示：
下面分三個階段分析：
元件的constructor方法會在元件掛載完成後被呼叫。在你宣告constructor方法時，注意要在開頭呼叫super（props）方法。否則就會引起this.props會因為未定義而報錯。
需要注意的是，除非在constructor中初始化state或者繫結方法，否則就不需要用到constructor函式。一般來說，方法盡量不要放在建構函式中以免引發一些錯誤。
getderivedstatefromprops在元件例項化後，和接受新的props後被呼叫。他返回乙個物件來更新狀態，或者返回null表示新的props不需要任何state的更新。可以用來替換componentwillrecieveprops週期方法。
如果是由於父元件的props更改，所帶來的重新渲染，也會觸發此方法。
componentdidmount在元件被掛載後立即呼叫。初始化使得dom節點應該進行到這裡。若你需要從遠端載入資料，這是乙個適合實現網路請求的地方。在該方法裡設定狀態將會觸發重新渲染。我們可以在component中呼叫setstate()方法，但是這會引起元件的再次渲染。不過第二次渲染會在瀏覽器更新螢幕之前，所以不會有頁面卡頓的***。官方的建議是如非必要盡量在constructor中初始化state的值。
render方法是元件唯一要求必須定義的方法。當render方法被呼叫時，它會驗證元件的引數和狀態並且返回以下幾種型別之一：
react 元素
字串或陣列
portals。react 16版本中提出的新的解決方案，可以使元件脫離父元件層級直接掛載在dom樹的任何位置。
null？boolean，什麼也不渲染或者根據boolean判斷是否渲染。
這個生命週期方法在元件轉變發生之前。它返回乙個值並將這個值作為componentdidupdate的第三個引數。
比如說當你需要儲存當前的滾動位置，那麼在重新渲染時，你可以通過呼叫這個方法記錄滾動位置然後再componentdidupdate中更新。
componentdidupdate()會在更新發生後立即被呼叫。該方法並不會在初始化渲染時呼叫。
當元件被更新時，使用該方法是操作dom的一次機會。這也是乙個適合傳送請求的地方，要是你對比了當前屬性和之前屬性（例如，如果屬性沒有改變那麼請求也就沒必要了）。
注意若shouldcomponentupdate()返回false，componentdidupdate()將不會被呼叫。
componentwillunmount()在元件被解除安裝和銷毀之前立刻呼叫。可以在該方法裡處理任何必要的清理工作，例如解綁定時器，取消網路請求，清理任何在componentdidmount環節建立的dom元素。
React元件生命週期
元件的所有狀態結合起來就成了元件的生命週期。即 初始化階段 執行中階段 銷毀階段。不同生命週期內可以自定義的函式 初始化階段 getdefaultprops 獲取預設屬性，只呼叫一次，是在createclass之後呼叫的。例項之間共享引用 getinitialstate 初始化每個例項的特有初始化狀...
React元件生命週期
首次例項化 例項化完成後的更新 元件已存在時的狀態改變 生命週期共提供了10個不同的api。1.getdefaultprops 作用於元件類，只呼叫一次，返回物件用於設定預設的props，對於引用值，會在例項中共享。2.getinitialstate 作用於元件的例項，在例項建立時呼叫一次，用於初始...
React 元件生命週期
在本章節中我們將討論 react 元件的生命週期。元件的生命週期可分成三個狀態 生命週期的方法有 這些方法的詳細說明，可以參考官方文件。以下例項在 hello 元件載入以後，通過 componentdidmount 方法設定乙個定時器，每隔100毫秒重新設定元件的透明度，並重新渲染 varhello...