react元件生命週期

為了理解react的工作過程，就必須要了解react元件的生命週期，如果人有生老病死，自然界有日月更替，每個元件在網頁中也會被建立、更新和刪除，如同有生命的機體一樣。本文將詳細介紹react元件生命週期

每乙個元件都有幾個可以重寫以讓**在處理環節的特定時期執行的「生命週期方法」。方法中帶有字首will的在特定環節之前被呼叫，而帶有字首did的方法則會在特定環節之後被呼叫

【裝配】

這些方法會在元件例項被建立和插入dom中時被呼叫：

constructor()
static getderivedstatefromprops()
componentwillmount()（版本17之後失效）
render()
componentdidmount()

【更新】

屬性或狀態的改變會觸發一次更新。當乙個元件在被重渲時，這些方法將會被呼叫：

componentwillreceiveprops()（版本17之後失效）
static getderivedstatefromprops()
shouldcomponentupdate()
componentwillupdate() （版本17之後失效）
render()
getsnapshotbeforeupdate()
componentdidupdate()

【解除安裝】

當乙個元件被從dom中移除時，該方法被呼叫：

componentwillunmount()

【錯誤處理】

在渲染過程中發生錯誤時會被呼叫

componentdidcatch()

【render()】

render()函式應該純淨，意味著其不應該改變元件的狀態，其每次呼叫都應返回相同的結果，同時不直接和瀏覽器互動。若需要和瀏覽器互動，將任務放在componentdidmount()階段或其他的生命週期方法

render函式應該是乙個純函式，完全根據this.state和this.props來決定返回的結果，而且不要產生任何***。在render函式中呼叫this.setstate毫無疑問是錯誤的，因為乙個純函式不應該引起狀態的改變

【constructor(props)】

react元件的建構函式將會在裝配之前被呼叫。當為乙個react.component子類定義建構函式時，應該在任何其他的表示式之前呼叫super(props)。否則，this.props在建構函式中將是未定義，並可能引發異常

【static getderivedstatefromprops(nextprops, prevstate)】

元件例項化後和接受新屬性時將會呼叫getderivedstatefromprops。它應該返回乙個物件來更新狀態，或者返回null來表明新屬性不需要更新任何狀態

[注意1]如果父元件導致了元件的重新渲染，即使屬性沒有更新，這一方法也會被呼叫

[注意2]呼叫this.setstate() 通常不會觸發 getderivedstatefromprops()

典型用法如下所示：

static
getderivedstatefromprops() 
}

【componentdidmount()】

componentdidmount()在元件被裝配後立即呼叫。初始化使得dom節點應該進行到這裡。若需要從遠端載入資料，這是乙個適合實現網路請求的地方

在這個方法中呼叫setstate()將會觸發一次額外的渲染，但是它將在瀏覽器重新整理螢幕之前發生。這保證了即使render()將會呼叫兩次，但使用者不會看到中間狀態。謹慎使用這一模式，因為它常導致效能問題

【static getderivedstatefromprops(nextprops, prevstate)】

元件例項化後和接受新屬性時將會呼叫getderivedstatefromprops。它應該返回乙個物件來更新狀態，或者返回null來表明新屬性不需要更新任何狀態

[注意1]如果父元件導致了元件的重新渲染，即使屬性沒有更新，這一方法也會被呼叫

[注意2]呼叫this.setstate() 通常不會觸發 getderivedstatefromprops()

【shouldcomponentupdate(nextprops, nextstate)】

使用shouldcomponentupdate()可以讓react知道當前狀態或屬性的改變是否不影響元件的輸出。預設行為是在每一次狀態的改變重渲，在大部分情況下應該依賴於預設行為

當接收到新屬性或狀態時，shouldcomponentupdate() 在渲染前被呼叫。預設為true

若該方法返回false，則componentwillupdate()、componentdidupdate()、render()將不會被呼叫

[注意]該方法並不會在初始化渲染或當使用forceupdate()時被呼叫

【render()】

【getsnapshotbeforeupdate()】

getsnapshotbeforeupdate()在最新的渲染輸出提交給dom前將會立即呼叫。它讓元件能去獲得當前的值在它們可能要改變前。這一生命週期返回的任何值將會作為引數被傳遞給componentdidupdate()

[注意]該方法必須與componentdidupdate()方法一起使用

【componentdidupate(prevprops, prevstate)】

componentdidupdate()會在更新發生後立即被呼叫。該方法並不會在初始化渲染時呼叫。當元件被更新時，使用該方法是操作dom的一次機會。這也是乙個適合傳送請求的地方

【componentwillunmount()】

componentwillunmount()在元件被解除安裝和銷毀之前立刻呼叫。可以在該方法裡處理任何必要的清理工作，例如解綁定時器，取消網路請求，清理任何在componentdidmount環節建立的dom元素

【component.forceupdate(callback)】

預設情況，當元件或狀態發生改變，元件將會重渲。若render()方法依賴其他資料，可以通過呼叫forceupdate()來告訴react元件需要重渲

呼叫forceupdate()將會導致元件的render()方法被呼叫，並忽略shouldcomponentupdate()。這將會觸發每乙個子元件的生命週期方法，涵蓋每個子元件的shouldcomponentupdate()方法。若當標籤改變，react僅會更新dom

通常應該嘗試避免所有forceupdate()的用法並僅在render()函式裡從this.props和this.state讀取資料

1、使用getderivedstatefromprops生命週期函式時，如果不設定constructor，會有如下警告

did not properly initialize state during construction. expected state to be an object, but it was undefined.

新增空state即可解決

constructor(props) 
}

2、使用componentdidmount生命週期函式時，如果在該函式中直接使用this.setstate()，會有如下警告

do not use setstate in componentdidmount  react/no-did-mount-set-state

將state設定轉移到then方法，或者另乙個函式中即可

componentdidmount() 
test() )
}

react元件生命週期

React元件生命週期

React元件生命週期

React 元件生命週期

react元件生命週期

React元件生命週期

React元件生命週期

React 元件生命週期

相關推薦