如圖，可以把元件生命週期大致分為三個階段：
生命週期**函式
下面來詳細介紹生命週期中的各**函式。
getdefaultprops
在元件建立之前，會先呼叫 ，這是全域性呼叫一次，嚴格地來說，這不是元件的生命週期的一部分。在元件被建立並載入候，首先呼叫 ，來初始化元件的狀態。
componentwillmount
然後，準備載入元件，會呼叫 ，其原型如下：
void componentwillmount()
這個函式呼叫時機是在元件建立，並初始化了狀態之後，在第一次繪製 之前。可以在這裡做一些業務初始化操作，也可以設定元件狀態。這個函式在整個生命週期中只被呼叫一次。
componentdidmount
在元件第一次繪製之後，會呼叫 ，通知元件已經載入完成。函式原型如下：
void componentdidmount()
這個函式呼叫的時候，其虛擬 dom 已經構建完成，你可以在這個函式開始獲取其中的元素或者子元件了。需要注意的是，rn 框架是先呼叫子元件的 ，然後呼叫父元件的函式。從這個函式開始，就可以和 js 其他框架互動了，例如設定計時 或者 ，或者發起網路請求。這個函式也是只被呼叫一次。這個函式之後，就進入了穩定執行狀態，等待事件觸發。
componentwillreceiveprops
如果元件收到新的屬性（props），就會呼叫 ，其原型如下：
void componentwillreceiveprops( object nextprops )
輸入引數 是即將被設定的屬性，舊的屬性還是可以通過 來獲取。在這個**函式裡面，你可以根據屬性的變化，通過呼叫 來更新你的元件狀態，這裡呼叫更新狀態是安全的，並不會觸發額外的 呼叫。如下：
componentwillreceiveprops: function(nextprops) ); }
shouldcomponentupdate
當元件接收到新的屬性和狀態改變的話，都會觸發呼叫 ，函式原型如下：
boolean shouldcomponentupdate( object nextprops, object nextstate )
輸入引數 和上面的 函式一樣， 表示元件即將更新的狀態值。這個函式的返回值決定是否需要更新元件，如果 表示需要更新，繼續走後面的更新流程。否者，則不更新，直接進入等待狀態。
預設情況下，這個函式永遠返回 用來保證資料變化的時候 ui 能夠同步更新。在大型專案中，你可以自己過載這個函式，通過檢查變化前後屬性和狀態，來決定 ui 是否需要更新，能有效提高應用效能。
componentwillupdate
如果元件狀態或者屬性改變，並且上面的 返回為 ，就會開始準更新元件，並呼叫 ，其函式原型如下：
void componentwillupdate( object nextprops, object nextstate )
輸入引數與 一樣，在這個**中，可以做一些在更新介面之前要做的事情。需要特別注意的是，在這個函式裡面，你就不能使用 來修改狀態。這個函式呼叫之後，就會把 和 分別設定到 和 中。緊接著這個函式，就會呼叫 來更新介面了。
componentdidupdate
呼叫了 更新完成介面之後，會呼叫 來得到通知，其函式原型如下：
void componentdidupdate( object prevprops, object prevstate )
因為到這裡已經完成了屬性和狀態的更新了，此函式的輸入引數變成了 和 。
componentwillunmount
當元件要被從介面上移除的時候，就會呼叫 ，其函式原型如下：
void componentwillunmount()
在這個函式中，可以做一些元件相關的清理工作，例如取消計時器、網路請求等。
總結到這裡，rn 的元件的完整的生命都介紹完了，在回頭來看一下前面的圖，就比較清晰了，把生命週期的**函式總結成如下**：
生命週期
呼叫次數
能否使用 setsate()
getdefaultprops
1(全域性呼叫一次)
否getinitialstate1否
componentwillmount1是
render
>=1
否componentdidmount1是
componentwillreceiveprops
>=0
是shouldcomponentupdate
>=0
否componentwillupdate
>=0
否componentdidupdate
>=0
否componentwillunmount1否
React生命週期函式
說來慚愧，準大四計算機專業學生黨第一次寫技術部落格。以前學東西沒有記錄的習慣總是容易忘記。最近在看老師的教程學習react框架，想寫點東西記錄一下學習的過程。若寫的不好，各位大佬見諒了，歡迎指正。什麼是生命週期函式？生命週期函式就是元件某一時刻會自動執行的函式。initialzation 初始化 m...
React 生命週期函式
initialization 初始化 mounting 掛載 updation 更新 unmounting setup componentwillmount props states componentwillunmont 當這個元件即將被從頁面中移除的時候，會被執行 props render co...
react生命週期函式
生命週期函式 某一時刻元件會自動呼叫執行的函式 render也是 initialization 初始化 constructor裡 mounting 掛載 componentwillmount 接下來render 生命週期函式的使用場景 不可缺少的乙個生命週期函式是render 效能優化 減少無謂的渲...