React元件的生命週期

組建從被建立到被銷毀的過程稱為元件的生命週期。react為元件在不同的生命週期階段提供了不同的生命週期方法，可以讓我們在元件的生命週期過程中更好的控制項的行為。通常生命週期我們可以分為三個階段：

掛載階段 -> 更新階段 -> 解除安裝階段

constructor

constructor本身是es6的class的構造方法，元件被建立時，會首先呼叫元件的構造方法。這個構造方法會接受乙個props引數，props是從父元件傳過來的屬性物件，如果父元件沒有傳入屬性而元件自身定義了預設屬性，那麼這個props指向的就是元件的預設屬性。

constructor通常用於初始化元件的state以及繫結事件處理函式等。

componentwillmount

該方法在元件被掛載到dom前呼叫，且只會被呼叫一次。這個方法實際上很少被用到，相關階段的處理完全可以放到constructor中。

在這個方法中呼叫this.setstate不會引起元件的重新渲染。

該方法是元件定義時唯一必要的方法（元件的其他生命週期函式都可以忽略）。在這個方法中，根據元件的props和state返回乙個react元素，用於描述元件的ui，通常react元素使用jsx語法定義。

需要注意的是，render並不負責元件的實際渲染工作，它只是返回了乙個ui的描述，真正的渲染出頁面dom的工作是由react自身負責。

render是乙個純函式，在這個方法中不能執行任何有『***』的操作，所以不能在render方法中呼叫this.setstate，這會改變元件的狀態，導致程式出現問題。

componentdidmount

在元件被掛載到dom後將會呼叫這個方法，且只會被呼叫一次。這個時候已經可以獲取到dom結構，因為依賴dom節點的操作可以放到這個方法中。這個方法通常還會用於向伺服器請求資料。在這個方法中呼叫this.setstate會引起元件的重新渲染。

元件被掛載到dom後，元件的props和state可以引起元件更新。props引起的元件更新，本質上是由渲染該元件的父元件引起的，也就是當父元件的render方法被呼叫時，元件會發生更新過程。這個時候，元件的props的值是否變更是由父元件來決定的，但是，無論props是否變化，父元件render方法每被呼叫一次，都會導致元件更新。

state引起的更新過程，是通過呼叫this.setstate修改元件的state來觸發的。

看名稱也可以猜到，這個方法和props有關。這個方法只會在props引起的元件更新過程中，才會被呼叫。

state引起的元件更新並不會觸發該方法。方法的引數nextprops是父元件傳遞給當前元件的新的props。在前面我們也提到過，父元件render方法的呼叫並不能保證傳遞給子元件的props發生變化，也就是說nextprops不一定發生變化，因為往往我們需要先比較nextprops和this.props來決定是否執行props發生變化後的邏輯。比如根據新的props來更新state觸發元件的重新渲染。

在componentwillreceiveprops中呼叫setstate，只有在元件render及其之後的方法中，this.state指向的才是更新後的state。在render之前的方法（shouldcomponentupdate、componentwillupdate）中，this.state依然指向更新前的state

通過呼叫setstate更新元件狀態並不會觸發componentwillreceiveprops的呼叫，否則可能會進入死迴圈，componentwillreceiveprops->this.setstate->componentwillreceiveprops->this.setstate-> ……

這個方法決定元件是否繼續執行更新過程。當方法返回true時（true也是這個方法的預設返回值），元件會繼續更新過程；當方法返回false時，元件的更新過程將停止，後續的componentwillupdate、render、componentdidupdate也不會被呼叫。

一般通過比較nextprops、nextstate的元件當前的props、state決定這個方法的返回結果。這個方法可以用來減少元件不必要的渲染，從而優化元件的效能。

componentwillupdate(nextprops, nextstate)

這個方法在元件render呼叫前執行，可以作為元件更新發生前執行某些工作的地方，一般也較少用到。

shouldcomponentupdate和componentwillupdate中都不能呼叫setstate，否則會引起迴圈呼叫問題，render永遠無法被呼叫，元件也就不能被更新了。

元件更新後呼叫，可以作為操作更新後的dom的地方，這個方法的兩個引數prevprops和prevstate代表元件更新前的props和state。

該過程是元件從dom中被解除安裝的過程，該過程只有乙個生命週期方法：componentwillunmount

componentwillunmount

這個方法在元件被解除安裝前呼叫，可以在這裡執行一些清理工作，比如清除元件中使用的定時器，清除componentdidmount中手動建立的dom元素等，以避免引起記憶體洩露。

上面我們簡單梳理分析了react元件的生命週期方法的不同階段的執行過程，以及每個生命週期方法的功能的作用。最後要提醒大家，只有類元件才具有生命週期方法，函式元件是沒有生命週期方法的。

React元件生命週期

元件的所有狀態結合起來就成了元件的生命週期。即 初始化階段 執行中階段 銷毀階段。不同生命週期內可以自定義的函式 初始化階段 getdefaultprops 獲取預設屬性，只呼叫一次，是在createclass之後呼叫的。例項之間共享引用 getinitialstate 初始化每個例項的特有初始化狀...

React元件生命週期

首次例項化 例項化完成後的更新 元件已存在時的狀態改變 生命週期共提供了10個不同的api。1.getdefaultprops 作用於元件類，只呼叫一次，返回物件用於設定預設的props，對於引用值，會在例項中共享。2.getinitialstate 作用於元件的例項，在例項建立時呼叫一次，用於初始...

React 元件生命週期

在本章節中我們將討論 react 元件的生命週期。元件的生命週期可分成三個狀態 生命週期的方法有 這些方法的詳細說明，可以參考官方文件。以下例項在 hello 元件載入以後，通過 componentdidmount 方法設定乙個定時器，每隔100毫秒重新設定元件的透明度，並重新渲染 varhello...