前幾天和同事討論react，發現對生命週期還是了解的不夠深入，於是今天翻看了react關於生命週期的官方文件，剛好發現react發布了新版本，並且對生命週期做了修改，於是認真閱讀了一下，並記錄下來，供以後開發時參考，相信對其他人也有用。
以前覺得生命週期的英文太多了，要記很麻煩。現在看文件才發現，有些小竅門。
constructor()
constructor方法在元件建立前被呼叫。
在這個方法裡面，應該先呼叫super(props)，否則this.props就會未定義。
這個方法的主要用途是，初始化props，state和繫結方法。
如果在裡面用props為state賦值，那麼最好把state提公升，也可以在getderivedstatefromprops()裡面用props為state賦值。
static getderivedstatefromprops()
在下列三種情況下，會呼叫getderivedstatefromprops方法：
元件例項化。
元件的props發生變化。
父元件重新渲染。
this.setstate()不會觸發getderivedstatefromprops()，但是this.forceupdate()會。
unsafe_componentwillmount()
這個方法在render方法執行前被呼叫。官方不建議用這個方法，所以給它加了乙個unsafe字首。官方建議把要在這裡面寫的內容放到constructor()或者componentdidmount()裡面。
另外，這個方法是唯一的服務端渲染鉤子。
render()
當呼叫render的時候，元件會檢查props和state並返回下列型別中的乙個：
react元素。
字串或者數字。
portals。
null。(不渲染)
booleans。(不渲染)
react.fragment。
componentdidmount()
這個方法會在元件建立之後立即呼叫。需要dom節點的初始化應該放在這裡。
需要注意的是，在這裡呼叫setstate()會發生第二次render，但是這第二次render會發生在瀏覽器渲染之前，所以使用者往往看不到第二次渲染，即使這樣，也要小心使用這個方法，因為它會造成效能問題。
unsafe_componentwillreceiveprops()
在下列三種情況下，會呼叫unsafe_componentwillreceiveprops方法，但是官方不建議使用這個方法，官方建議使用static getderivedstatefromprops方法。
元件的props發生改變。
父元件發生重新渲染。
需要注意的是，在初始化props的時候並不會呼叫這個方法，this.setstate()也不會觸發這個方法。
static getderivedstatefromprops
在update階段也會呼叫一次這個方法。
shouldcomponentupdate()
這個方法的預設行為是每當state發生改變的時候就重新渲染元件。
當初始化的時候，這個方法不會被呼叫，當使用forceupdate()的時候，這個方法也不會呼叫。
如果要提公升效能的話，建議使用react.purecomponent，它在shouldcomponentupdate()的預設行為中使用了淺比較。你也可以在裡面自己寫比較方法。
unsafe_componentwillupdate()
這個方法會在接受新props和state之後呼叫。官方不建議在裡面呼叫setstate()，要使用的話，建議在getderivedstatefromprops方法裡面使用。
render()
在update階段也會呼叫一次這個方法。
getsnapshotbeforeupdate()
這個方法會在把渲染結果提交到dom之前被呼叫。它可以返回乙個引數，這個引數被componentdidupdate(prevprops, prevstate, snapshot)方法的第三個引數接收。
componentdidupdate()
這個方法會在元件更新前被呼叫，所以最好在這裡面操作dom。
componentwillunmount
這個方法會在元件被銷毀時呼叫，所以在這裡面做一些必要的清理，比如計時器，網路請求，訂閱等等。
componentdidcatch()
這個方法在元件catch到各種error之後呼叫，並進行處理。不要在裡面改變資料流，它也不能處理本身丟擲的錯誤。
React 生命週期 生命週期方法
生命週期 掛載 更新 解除安裝 元件被建立 執行初始化 並被掛載到dom中，完成元件的第一次渲染 constructor props getderivedstatefromprops props,state render componentdidmount 元件被建立時會首先呼叫元件的構造方法，接受...
react 生命週期
首次例項化 例項化完成後的更新 元件已存在時的狀態改變 生命週期共提供了10個不同的api。1.getdefaultprops 作用於元件類，只呼叫一次，返回物件用於設定預設的props，對於引用值，會在例項中共享。2.getinitialstate 作用於元件的例項，在例項建立時呼叫一次，用於初始...
react生命週期
盜圖一張 第一次進入頁面列印結果 1 parent constructor 2 parent conponentwillmount 3 parent render 4 initial render constructor 5 componentwillmount 6 render 7 compone...