react元件生命週期

componentwillreceiveprops 在第一次傳入props時並不會觸發，這是由於該生命週期屬於資料更新部分的，不因該妨礙元件的建立過程

shouldcomponentupdate 如同乙個閥門，必須返回bool值

constructor

componentwillmount

render

componentdidmount

更新階段：由元件內部api setstate() 或父元件重新render觸發

shouldcomponentupdate

componentwillupdate

render

componentdidupdate

解除安裝階段：由reactdom.unmountcomponentatnode() 觸發

getderivedstatefromprops 取代 componentwillmount 和 componentwillreceiveprops 橫跨了更新階段和初始化階段，所以這個方法可以接收到初始化階段傳入的props

去除了componentwillupdate ，讓forceupdate 通過getderivedstatefromprops直接能夠觸發render

更新階段還是收到shouldcomponentupdate 控制

constructor

static getderivedstatefromprops(props, state)

render

componentdidmount

更新階段：由元件內部api setstate() 或父元件重新render觸發

getderivedstatefromprops

shouldcomponentupdate

render

getsnapshotbeforeupdate 返回任意值作為快照

componentdidupdate(prevprops, prevstate, snapshotvalue)

解除安裝階段：由reactdom.unmountcomponentatnode() 觸發

componentwillunmount

getderivedstatefromprops && getsnapshotbeforeupdate 雖然在實際的開發中使用的很少，但是肯定也是有他存在的理由的，下面提供兩個案例用來說明其作用

對於一常有動態資料插入的頁面，要使得頁面的滾動條不隨著資料的插入而變化，我們可以在資料更新後設定滾動條的位置來實現

class

newlist
extends
react.component
componentdidmount()
=this
.state
const news =
'新聞'
+(newsarr.length +
1this
.setstate()
},1000)}
getsnapshotbeforeupdate()
componentdidupdate
(preprops, prestate, height)
render()
>
<
/div>})
}<
/div>)}
}

這個案例可知 getsnapshotbeforeupdate 確實是在頁面更新之前獲生成快照值，傳遞給componentdidupdate 來做相應的處理

元件的狀態完全是外部props的派生時，可以用getderivedstatefromprops 實現，這樣做的好處在於可以製作出高度向外的元件，具體的案例就不在這裡繼續贅述了

React元件生命週期

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

React元件生命週期

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

React 元件生命週期

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