2. 更新過程
3. react新增的生命週期(個人補充)
這周開始學習react的生命週期。
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（）。
43人點贊
日記本
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...