react生命週期鉤子

大家先看一張關於元件掛載的經典的：

下面一一說一下這幾個生命週期的意義：

object getdefaultprops()

執行過一次後，被建立的類會有快取，對映的值會存在this.props,前提是這個prop不是父元件指定的

這個方法在物件被建立之前執行，因此不能在方法內呼叫this.props，另外，注意任何getdefaultprops()返回的物件在例項中共享，不是複製

object getinitialstate()

控制項載入之前執行，返回值會被用於state的初始化值

void componentwillmount()

執行一次，在初始化render之前執行，如果在這個方法內呼叫setstate，render()知道state發生變化，並且只執行一次

reactelement render()

render的時候會呼叫render()會被呼叫

呼叫render()方法時，首先檢查this.props和this.state返回乙個子元素，子元素可以是dom元件或者其他自定義復合控制項的虛擬實現

如果不想渲染可以返回null或者false，這種場景下，react渲染乙個標籤，當返回null或者false時，reactdom.finddomnode(this)返回null

render()方法是很純淨的，這就意味著不要在這個方法裡初始化元件的state，每次執行時返回相同的值，不會讀寫dom或者與伺服器互動，如果必須如伺服器互動，在componentdidmount()方法中實現或者其他生命週期的方法中實現，保持render()方法純淨使得伺服器更準確，元件更簡單

void componentdidmount()

在初始化render之後只執行一次，在這個方法內，可以訪問任何元件，componentdidmount()方法中的子元件在父元件之前執行

從這個函式開始，就可以和 js 其他框架互動了，例如設定計時 settimeout 或者 setinterval，或者發起網路請求

boolean shouldcomponentupdate(
object nextprops, object
nextstate
}

這個方法在初始化render時不會執行，當props或者state發生變化時執行，並且是在render之前，當新的props或者state不需要更新元件時，返回false

shouldcomponentupdate: function(nextprops, nextstate)

當shouldcomponentupdate方法返回false時，就不會執行render()方法，componentwillupdate和componentdidupdate方法也不會被呼叫

預設情況下，shouldcomponentupdate方法返回true防止state快速變化時的問題，但是如果·state不變，props唯讀，可以直接覆蓋shouldcomponentupdate用於比較props和state的變化，決定ui是否更新，當元件比較多時，使用這個方法能有效提高應用效能

void
componentwillupdate(
object nextprops, object
nextstate
)

當props和state發生變化時執行，並且在render方法之前執行，當然初始化render時不執行該方法，需要特別注意的是，在這個函式裡面，你就不能使用this.setstate來修改狀態。這個函式呼叫之後，就會把nextprops和nextstate分別設定到this.props和this.state中。緊接著這個函式，就會呼叫render()來更新介面了

void
componentdidupdate(
object prevprops, object
prevstate
)

元件更新結束之後執行，在初始化render時不執行

void
componentwillreceiveprops(
object
nextprops
)

當props發生變化時執行，初始化render時不執行，在這個**函式裡面，你可以根據屬性的變化，通過呼叫this.setstate()來更新你的元件狀態，舊的屬性還是可以通過this.props來獲取,這裡呼叫更新狀態是安全的，並不會觸發額外的render呼叫

componentwillreceiveprops: function(nextprops) );
}

void componentwillunmount()

當元件要被從介面上移除的時候，就會呼叫componentwillunmount(),在這個函式中，可以做一些元件相關的清理工作，例如取消計時器、網路請求等

react生命週期鉤子

React 生命週期鉤子

React生命週期鉤子

React生命週期鉤子函式

react生命週期鉤子

React 生命週期鉤子

React生命週期鉤子

React生命週期鉤子函式

相關推薦