react元件的生命週期

生命週期：元件從誕生到銷毀會經歷一系列的過程，該過程就叫做生命週期。react在元件的生命週期中提供了一系列的`鉤子函式``（類似於事件），可以讓開發者在函式中注入**，這些**會在適當的時候執行。在vue 的元件裡面，也存在生命週期，詳情檢視

在react 中，存在兩種元件，類元件和函式式元件，但是生命週期主要式之在類元件的。

生命週期的過程如下圖：

分析

掛載階段

constructor

同乙個元件物件只會建立一次

不能在第一次掛載到頁面之前，呼叫setstate，為了避免問題，建構函式中嚴禁使用setstate

componentwillmount

正常情況下，和建構函式一樣，它只會執行一次

可以使用setstate，但是為了避免bug，不允許使用，因為在某些特殊情況下，該函式可能被呼叫多次

render返回乙個虛擬dom，會被掛載到虛擬dom樹中，最終渲染到頁面的真實dom中

render可能不只執行一次，只要需要重新渲染，就會重新執行

嚴禁使用setstate，因為可能會導致無限遞迴渲染

componentdidmount只會執行一次

可以使用setstate

通常情況下，會將網路請求、啟動計時器等一開始需要的操作，書寫到該函式中

元件進入活躍狀態

componentwillreceiveprops

即將接收新的屬性值

引數為新的屬性物件

該函式可能會導致一些bug，所以不推薦使用

shouldcomponentupdate指示react是否要重新渲染該元件，通過返回true和false來指定

預設情況下，會直接返回true

componentwillupdate

元件即將被重新渲染

componentdidupdate

往往在該函式中使用dom操作，改變元素,這裡可以操作原生的dom

componentwillunmount通常在該函式中銷毀一些元件依賴的資源，比如計時器

getderivedstatefromprops(靜態的)

通過引數可以獲取新的屬性和狀態

該函式是靜態的

該函式的返回值會覆蓋掉元件狀態

該函式幾乎是沒有什麼用

getsnapshotbeforeupdate真實的dom構建完成，但還未實際渲染到頁面中。

在該函式中，通常用於實現一些附加的dom操作

該函式的返回值，會作為componentdidupdate的第三個引數

新版的生命週期和舊版的生命週期相比：

去除了componentwillmount,把componentwillreceiveprops變成getderivedstatefromprops去掉的這兩個生命鉤子函式都是在實際開發中，比怎麼常用的，

增加getsnapshotbeforeupdate這個生命鉤子很有用，原來操作dom 是直接在componentdidupdate，現在直接放在獲取更新前的快照，並且把結果返回給componentdidupdate的第三個引數

react 始終貫徹 資料是單項的，誰的資料誰就有權更改，其他人無權，這個原則在vue 中也是同樣的模式，千萬不要使用反模式的方式，徒增煩惱

React元件生命週期

元件的所有狀態結合起來就成了元件的生命週期。即 初始化階段 執行中階段 銷毀階段。不同生命週期內可以自定義的函式 初始化階段 getdefaultprops 獲取預設屬性，只呼叫一次，是在createclass之後呼叫的。例項之間共享引用 getinitialstate 初始化每個例項的特有初始化狀...

React元件生命週期

首次例項化 例項化完成後的更新 元件已存在時的狀態改變 生命週期共提供了10個不同的api。1.getdefaultprops 作用於元件類，只呼叫一次，返回物件用於設定預設的props，對於引用值，會在例項中共享。2.getinitialstate 作用於元件的例項，在例項建立時呼叫一次，用於初始...

React 元件生命週期

在本章節中我們將討論 react 元件的生命週期。元件的生命週期可分成三個狀態 生命週期的方法有 這些方法的詳細說明，可以參考官方文件。以下例項在 hello 元件載入以後，通過 componentdidmount 方法設定乙個定時器，每隔100毫秒重新設定元件的透明度，並重新渲染 varhello...