react的生命週期從廣義上分為三個階段：掛載、渲染、解除安裝
因此可以把react的生命週期分為兩類：掛載解除安裝過程和更新過程。
react的生命週期圖:
react生命週期圖
constructor()中完成了react資料的初始化，它接受兩個引數：props和context，當想在函式內部使用這兩個引數時，需使用super()傳入這兩個引數。
注意：只要使用了constructor()就必須寫super(),否則會導致this指向錯誤。
componentwillmount()一般用的比較少，它更多的是在服務端渲染時使用。它代表的過程是元件已經經歷了constructor()初始化資料後，但是還未渲染dom時。
元件第一次渲染完成，此時dom節點已經生成，可以在這裡呼叫ajax請求，返回資料setstate後元件會重新渲染
在此處完成元件的解除安裝和資料的銷毀。
clear你在組建中所有的settimeout,setinterval
移除所有組建中的監聽 removeeventlistener
有時候我們會碰到這個warning:
can only update a mounted or mounting component. this usually means you called setstate() on an unmounted component. this is a no-op. please check the code for the undefined component.
解決方法：
componentdidmount() )})}
componentwillunmount()
接受乙個引數nextprops
通過對比nextprops和this.props，將nextprops的state為當前元件的state，從而重新渲染元件
componentwillreceiveprops (nextprops) ，() => )
}
唯一用於控制項重新渲染的生命週期，由於在react中，setstate以後，state發生變化，元件會進入重新渲染的流程，在這裡return false可以阻止元件的更新
因為react父元件的重新渲染會導致其所有子元件的重新渲染，這個時候其實我們是不需要所有子元件都跟著重新渲染的，因此需要在子元件的該生命週期中做判斷
shouldcomponentupdate返回true以後，元件進入重新渲染的流程，進入componentwillupdate,這裡同樣可以拿到nextprops和nextstate。
元件更新完畢後，react只會在第一次初始化成功會進入componentdidmount,之後每次重新渲染後都會進入這個生命週期，這裡可以拿到prevprops和prevstate，即更新前的props和state。
render函式會插入jsx生成的dom結構，react會生成乙份虛擬dom樹，在每一次元件更新時，在此react會通過其diff演算法比較更新前後的新舊dom樹，比較以後，找到最小的有差異的dom節點，並重新渲染。
react新增生命週期
代替componentwillreceiveprops()。
老版本中的componentwillreceiveprops()方法判斷前後兩個 props 是否相同，如果不同再將新的 props 更新到相應的 state 上去。這樣做一來會破壞 state 資料的單一資料來源，導致元件狀態變得不可**，另一方面也會增加元件的重繪次數。
舉個例子:
// before
componentwillreceiveprops(nextprops) );
} if (nextprops.islogin)
}// after
static getderivedstatefromprops(nextprops, prevstate) ;
} return null;
}componentdidupdate(prevprops, prevstate)
}
在 componentwillreceiveprops 中，我們一般會做以下兩件事，一是根據 props 來更新 state，二是觸發一些**，如動畫或頁面跳轉等。
在老版本的 react 中，這兩件事我們都需要在 componentwillreceiveprops 中去做。
而在新版本中，官方將更新 state 與觸發**重新分配到了 getderivedstatefromprops 與 componentdidupdate 中，使得元件整體的更新邏輯更為清晰。而且在 getderivedstatefromprops 中還禁止了元件去訪問 this.props，強制讓開發者去比較 nextprops 與 prevstate 中的值，以確保當開發者用到 getderivedstatefromprops 這個生命週期函式時，就是在根據當前的 props 來更新元件的 state，而不是去做其他一些讓元件自身狀態變得更加不可**的事情。
代替componentwillupdate。
常見的 componentwillupdate 的用例是在元件更新前，讀取當前某個 dom 元素的狀態，並在 componentdidupdate 中進行相應的處理。
這兩者的區別在於：
在 react 開啟非同步渲染模式後，在 render 階段讀取到的 dom 元素狀態並不總是和 commit 階段相同，這就導致在
componentdidupdate 中使用 componentwillupdate 中讀取到的 dom 元素狀態是不安全的，因為這時的值很有可能已經失效了。
getsnapshotbeforeupdate 會在最終的 render 之前被呼叫，也就是說在 getsnapshotbeforeupdate 中讀取到的 dom 元素狀態是可以保證與 componentdidupdate 中一致的。
此生命週期返回的任何值都將作為引數傳遞給componentdidupdate（）。
React生命週期詳解
前言 學習react，生命週期很重要，我們了解完生命週期的各個元件，對寫高效能元件會有很大的幫助.ract生命週期 react 生命週期分為三種狀態 1.初始化 2.更新 3.銷毀 初始化 1 getdefaultprops 設定預設的props，也可以用dufaultprops設定元件的預設屬性....
react生命週期詳解
1 生命週期指的是元件從初始化開始到結束的過程 或者是生命週期是描述react元件從開始到結束的過程 2 每個react元件都具有生命週期 3 react都對元件通過生命週期給予的鉤子函式進行管理 指的是系統某些狀態和引數發生改變的時候，系統立馬去通知對應處理的函式 叫做鉤子函式。一方面有變動。另一...
React生命週期詳解
react生命週期 一 舊版 二 新版 從圖中，我們可以清楚知道react的生命週期分為三個部分 例項化 存在期和銷毀時。舊版生命週期如果要開啟async rendering，在render函式之前的所有函式，都有可能被執行多次。舊版的react生命週期看圖就可以啦，我們就不詳細講解了，下面我們來詳...