react生命週期的鉤子函式

生命週期，鉤子函式：

掛載階段：

一、constructor（第乙個執行）

1.可以初始化元件狀態

2.可以給一些事件函式繫結this

注意：不能再內部呼叫setstate()

constructor()
//不能在內部呼叫setstate()
this.handleclick = this.handleclick.bind(this)   //2.用來繫結this
} handleclick()
render()
點我哦)
}

二、static getderivedstatefromprops（）{}類的函式（真實屬於第二次執行的）

執行時機：

一旦元件裡面的狀態依靠屬性的變化而變化，那麼你就用到此鉤子函式

這個鉤子函式屬於類，前面需要加static修飾

子元件在constructor直接拿傳過來的屬性是拿不到的，除非在constructor傳入屬性props

讓元件內部的派生狀態始終區別於外部傳入的屬性的值，只有外部傳入的屬性改變了，自身的狀態才會發生變化

必須要有返回值,返回什麼state裡面就變成什麼？

在這個鉤子函式裡面，所以內部是不能訪問this的

在父元件定義乙個狀態。

constructor()
} render())}}>點我哦)}

在子元件接收，使用的時候，如果僅想外部控制外部傳遞過來的屬性，就需要加上該鉤子函式即：

如果你的元件的某個狀態就想由外部傳入的屬性進行關聯控制，希望屬性改變了，元件內部的狀態也發生變化，那麼就把這個狀態變成派生狀態，使用此鉤子函式即可。一旦元件裡面的狀態依靠屬性的變化而變化，那麼你就用到此鉤子函式

接收子元件狀態：
constructor(props)
}static getderivedstatefromprops(props)
} render() )}}>更改自身狀態   //加上上面的函式，該按鈕就沒有作用了，不能內部執行。
one --- )}

三、render可執行多次（第三個執行）

1.初始化立即執行（constructor）

2.render鉤子函式什麼時候執行？

（1）初始化的時候執行一次

（2）元件內部呼叫setstate | 外部傳入props改變（new props） | forceupdate（強制更新）

四、componentdidmount只執行一次，（第四個執行）

元件掛載完以後，只執行一次，

即將過期的函式。

17.x版本中不推薦使用的鉤子函式

unsafe_componentwillmount 不建議用，可以會出現bug，不能初始化因為會受到react16.xfiber的協調演算法，函式會執行多次，如果把非同步請求放到該鉤子函式中，非同步請求可能也會執行多次。

unsafe_componentwillreceiveprops

unsafe_componentwillupdate

componentwillmount vs componentdidmount (在哪個鉤子函式裡面進行非同步請求？)

子父元件的時候，會按照上面的順序，執行順序為

父元件constructor ->父元件render->子元件constructor ->子元件render->子元件componentdidmount->父元件componentdidmount

父元件：

constructor()
}  componentdidmount()
render())}}>點我哦)}

子元件：

constructor()
componentdidmount()
render()

解除安裝時

componentwillunmount

消除定時器相關的操作。

//解除安裝時
componentwillunmount()
//設定定時器
componentdidmount())
}, 2000);
}  //
render()}>解除安裝元件)}

更新時的鉤子函式

getderivedstatefromprops 在掛載階段已經講過。

shouldcomponentupdate

render 在掛載階段已經講過。

getsnapshotbeforeupdate

componentdidupdate

shouldcomponentupdate鉤子函式

注意：shouldcomponentupdate 是可以用來提公升react效能的鉤子函式! 可以減少一些render的執行次數

purecomponent 純元件，內部幫助實現了shouldcomponentupdate，相當於 component+shouldcomponentupdate

內部採用了淺層比較：

如果基本型別，值不一樣，才會執行render渲染。

如果引用型別，位址不一樣，才會執行render渲染。

詢問元件是否進行更新操作，預設true，就會執行元件的更新操作。

可以用來提公升react的效能

注：內部通過this.props.flag獲取的是之前的flag值，

如果想要獲取最新的，從引數裡面獲取props.flag

這個鉤子函式可以根據返回true或者返回false來去提公升react效能

根據外部傳入的屬性或者內部的狀態進行判斷，滿足某個條件下才去執行render渲染。

shouldcomponentupdate(props,state)else  
}

purecomponent 純元件

* purecomponent 純元件內部不能再去寫shouldcomponentupdate !!! (component+shouldcomponentupdate)

* 純元件內部進行了淺層比較？

* 基本型別：根據外部傳入的資料，新的資料與舊的資料是否一致，如果一致的話，render就不會執行。

export default class one extends purecomponent

componentdidupdate(prevprops, prevstate, snapshot)componentdidupdate

可以結合swiper學習：檢視版本：npm view swiper versions (6版本的有bug)

正常情況下在componentdidmount裡面例項化的話會出現無法滑動輪播圖的情況，所以可以在componentdidupdate判斷、例項化，這樣就可以解決這個問題。

react生命週期的鉤子函式

React生命週期鉤子函式

React的生命週期鉤子函式

react的生命週期鉤子函式

react生命週期的鉤子函式

React生命週期鉤子函式

React的生命週期鉤子函式

react的生命週期鉤子函式

相關推薦