React 生命週期

react生命週期是使用react開發中非常重要的一環。概括來說react的生命週期分為三個階段： mounting、updating、unmounting

mounting 階段出發的方法有：

constructor()

componentwillmount()

render()

componentdidmount()

updating階段出發的方法有：

componentwillreceiveprops()

shouldcomponentupdate()

componentwillupdate()

render()

componentdidupdate()

unmounting階段觸發的方法

componentwillunmount()

現在逐一說一下每個方法的用法

constructor
()

建構函式用來初始化state和props，元件建立的時候呼叫一次。

componentwillmount
()

見名知意，元件將要掛載，在元件掛載之前呼叫，此方法還能修改state（呼叫setstate方法）

render
()

必選的方法，建立虛擬的dom，該方法中有兩點需要特別注意：

1、不能修改state

2、返回的元件中只能有乙個頂級元件

componentdidmount
()

真是的dom被渲染後呼叫，所以可以在該方法中獲取真實的dom節點，可以用refs獲取dom節點

componentwillreceiveprops
()

元件接收到新的props時呼叫；父元件發生render()的時候也會呼叫（不管props有沒有更新）。該方法中可以修改state和props

shouldcomponentupdate
()

元件是否可以更新。返回乙個boolean值，預設為true。如果返回false則不會觸發元件的更新。每次setstate都會觸發該方法，但是有些時候資料的變化並不需要重新渲染元件，所以可以在這個方法中做判斷來決定是否要更新元件（返回true或false）

componentwillupdate
()

元件將要更新。可以和componentwillmount()對應起來，該方法中不可以修改state或props，否則又會迴圈到之前的生命週期方法中。呼叫forceupdate()方法也會觸發該方法。

componentdidupdate
()

元件完成更新後呼叫。可以方法dom元素，可以和componentdidmount()對應起來

componentwillunmount
()

元件將要銷毀前呼叫，一般做一些清理工作，一般在componentdidmount註冊的事件可以在該方法中刪除。比如建立的計時器和事件***。

我本人總結了乙個生命週期的流程圖，大家參考：