React生命週期鉤子

我一直覺得這張圖描述的真是太好了，首先，先看圖。。

初始化階段

constructor(props)
}

props的初始設定是在元件的外面

或者在內部使用靜態屬性 static

class home extends react.component 
}}home.defaultprops =
//或者在內部
static defaultprops =

componentwillmount()

componentdidmount() {

//一般情況下，我會在這裡做資料的請求

componentwillreceiveprops(){

//只會在props更新時執行，第一次渲染時不會執行存在於生存期

shouldcomponentupdate（）{

這個鉤子一般用來做優化，不過有時也會有各種各樣的問題，詳細用法可以檢視本人的這篇文章

其他api

與上面的生命週期方法（react為您呼叫）不同，下面的方法是您可以從元件呼叫的方法

只有兩個： setstate() 和 forceupdate()

setstate()將元件狀態的更改排入佇列並告訴react需要使用更新的狀態重新呈現此元件及其子元件，這是用於更新使用者介面以響應事件處理程式和伺服器響應的主要方法

可以將其setstate()視為請求而不是立即更新元件的命令。為了獲得更好的感知效能，react可能會延遲她，然後在一次通過中更新幾個元件。react不保證立即更改狀態

setstate()並不總是立即更新元件。它可以批量推遲更新或延遲更新，而使用componentdidupdate或者setstate**函式（第二個引數）,其中任何乙個都保證在應用更新後觸發。這時我們可能會想到vue的nexttick

setstate() 除非shouldcomponentupdate()返回false，否則會重新渲染。

forceupdate()

如果 render() 方法從 this.props 或者 this.state 之外的地方讀取資料，你需要通過呼叫 forceupdate() 告訴 react 什麼時候需要再次執行 render()。如果直接改變了 this.state，也需要呼叫 forceupdate()。呼叫 forceupdate() 將會導致 render() 方法在相應的元件上被呼叫，並且子級元件也會呼叫自己的 render()，但是如果標記改變了，那麼 react 僅會更新 dom。通常情況下，應該盡量避免所有使用 forceupdate() 的情況，在 render() 中僅從 this.props 和 this.state 中讀取資料。這會使應用大大簡化，並且更加高效。

虛擬dom

為什麼要使用虛擬dom?

虛擬dom是為了提高dom渲染效能的,因為瀏覽器的dom操作是最消耗效能的

把乙個真實的dom樹轉換成js物件樹(createelment),當我們改變頁面的時候,就會產生乙個目標的物件樹,兩棵物件樹進行比較,在記憶體中進行比較,比較出的不同點進行渲染

同級比較演算法(一旦發現某個節點沒有了,就刪除這個節點;一旦發現新增了乙個節點,就新增乙個節點;遇到相同的節點則保留)

逐層比較演算法的問題:

1.兩棵樹如果變化特別大,則次演算法無效

2.如果兄弟節點特別多的時候,插入和排序則變得很低效

逐層比較演算法的好處(高效):

1.演算法的時間複雜度降低(由o(n^3)變為o(n))

兩個假設

1.兩個相同元件產生類似的dom結構,不同的元件產生不同的dom結構

2.對於同一層次的一組子節點,它們可以通過唯一的id進行區分

React生命週期鉤子

React 生命週期鉤子

react生命週期鉤子

React生命週期鉤子函式

React生命週期鉤子

React 生命週期鉤子

react生命週期鉤子

React生命週期鉤子函式

相關推薦