理解React元件的生命週期

2021-09-17 02:35:05 字數 3075 閱讀 1323

本文作者寫作的時間較早,所以裡面會出現很多的舊版es5的時代的方法。不過,雖然如此並不影響讀者理解元件的生命週期。反而是作者分為幾種不同的觸發機制來解釋生命週期的各個方法,讓讀者更加容易理解涉及到的概念。以下是正文。

react在建立元件的時候會觸發元件生命週期各個方法的呼叫。這篇文章就分別介紹其中的各種不同的繪製觸發之後呼叫的各個生命週期的方法。

理解元件的生命週期,你才可以在元件建立、銷毀的時候執行特定的方法。甚至於,你可以決定是否更新元件,正確的處理stateprops的改變。

要弄清楚生命週期,首先就要區分開初次建立和stateprops更改觸發的元件更新,以及元件的解除安裝。

初始化初始化

√initial props

√initial state

componentwillmount

render

componentdidmount

在es6裡,initial props在類的constructor方法裡作為引數傳入了。initial state則在constructor方法裡有開發者自行設定。如:

class democomponent extends react.component 

this._innermethod = this._innermethod.bind(this)

}}

componentwillmount方法在render方法執行之前被呼叫。有一點需要注意,在這裡設定state不會觸發重繪。

render方法返回元件需要的標記(markup),並最終轉化為正確的輸出。propsstate都不應該在這個方法裡修改。一定要記住render方法必須是乙個純函式。也就是每次呼叫,這個方法都要返回同樣的結果。

render方法執行之後就開始執行componentdidmount方法。dom元素(react native的原生元素)可以在這個方法裡取到。這時可以在這個方法裡執行資料獲取等操作。如果需要的話,任何的dom操作都可以在這裡執行,絕對不可以在render方法裡執行。

state改變引發的繪製

state的修改會觸發一些列的方法:

更新state

shouldcomponentupdate

componentwillupdate

render

componentdidupdate

shouldcomponentupdate方法會在render方法呼叫之前呼叫。在這個方法裡可以控制是否繪製元件,或者直接跳過。顯然,這個方法一定不會在初始化的時候呼叫。在這個方法裡需要返回乙個boolean型別的值,預設返回true

shouldcomponentupdate(nextprops, nextstate)
通過對nextpropsnextstate的值的處理,可以判定接下來的重繪是否必要。

componentwillupdate方法在shouldcomponentupdate方法返回true之後就會被呼叫。在和方法裡任何的this.setstate方法呼叫都是不允許的,因為這個方法是用來為接下來的繪製做準備的,不是用來觸發重繪的。

componentdidupdate方法在render方法之後呼叫。和componentdidmount方法類似,這個方法裡也可以執行dom操作。

componentwillupdate(nextprops, nextstate) 

componentdidupdate(prevprops, prevstate)

props改變引發的繪製

任何對props物件的修改也會觸發生命週期方法的呼叫,這個過程和state的修改引發的生命週期方法基本一致,只是多了乙個方法。

更新props

componentwillrecieveprops

shouldcomponentupdate

componentwillupdate

render

componentdidupdate

componentwillrecieveprops只會在props物件發生改變並且不是初始繪製的時候呼叫。在這個方法裡,可以根據當前的props和將要傳入的props來設定state,但是這樣並不會觸發繪製。**這個方法裡有個很有趣的地方,在這個方法裡state的相等比較是無效的,因為state的改變不應該引起任何的props的改變。

componentwillreceiveprops(nextprops) )

}

其他的生命週期基本上和改變state引起的生命週期方法是一樣的。

解除安裝解除安裝

componentwillunmount

我們唯一沒有觸及的方法就是componentwillunmount了。這個方法在元件被從dom中移除之前呼叫。當你需要在元件移除前執行清理操作的時候非常有用。比如,清除timer之類的物件。

react元件生命週期理解

react元件有兩個狀態,乙個是渲染狀態,乙個是解除安裝狀態,而渲染狀態又分為初始渲染狀態 也可以說是建立狀態 和重新渲染狀態 也可以說是存在狀態,說明元件一直存在,會發生多次重新渲染 這三個狀態下又會產生一系列的生命週期函式,開發人員一般只需要了解其中五個主要的生命週期函式 componentwi...

react元件生命週期理解

應當做些初始化的動作,如 初始化state,將事件處理函式繫結到類例項上 在元件例項化後,和接受新的props後被呼叫。他必須返回乙個物件來更新狀態,或者返回null表示新的props不需要任何state的更新。如果是由於父元件的props更改,所帶來的重新渲染,也會觸發此方法 元件被裝配後立即呼叫...

React元件生命週期

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