我來講講react中的組件的生命周期更新階段的鉤子函數(shù)轻局，更新階段的鉤子函數(shù)一個(gè)就五個(gè)，更新階段的鉤子函數(shù)其實(shí)也就有三個(gè)需要認(rèn)識(shí)一下的嗽交，其他的在掛載階段已經(jīng)認(rèn)識(shí)過了。
更新階段的鉤子函數(shù)
static getDerivedStateFromProps()shouldComponentUpdate()render()getSnapshotBeforeUpdate()componentDidUpdate()
以上就是更新階段鉤子函數(shù)的執(zhí)行順序拾枣，并且我附上官網(wǎng)的地址，大家可以點(diǎn)擊查看官方文檔梅肤。
shouldComponentUpdate(nextProps, nextState)
其實(shí)很好理解這個(gè)鉤子函數(shù)，看下鉤子函數(shù)的名字就可以翻譯出來這個(gè)鉤子函數(shù)的用處姨蝴，shouldComponentUpdate是否應(yīng)該進(jìn)行組件的更新，如果需要更新的返回true左医，不需要更行的返回false，這個(gè)鉤子函數(shù)會(huì)受到state和props的影響跛十，每當(dāng)state和props發(fā)生改變的時(shí)候秕硝，在render()函數(shù)執(zhí)行之前將會(huì)執(zhí)行shouldComponentUpdate函數(shù)詢問一下是否需要進(jìn)行一個(gè)組件的更新芥映，默認(rèn)值時(shí)返回true远豺。如果返回false，componentWillUpdate,render和componentDidUpdate不會(huì)被調(diào)用躯护。有許多人利用這個(gè)鉤子函數(shù)來進(jìn)行一個(gè)性能的優(yōu)化作用，其實(shí)就是強(qiáng)制的斷開render()函數(shù)的執(zhí)行，不過不建議這樣使用内狸，因?yàn)楸容^容易產(chǎn)生bug。
注意：
- 詢問組件是否進(jìn)行更新操作,如果不寫默認(rèn)返回true昆淡，就代表組件要更新了，就會(huì)走render
- 如果說這個(gè)鉤子函數(shù)返回false避凝，就代表不讓組件更新，就不會(huì)走render
- 內(nèi)部如果想要獲取最新屬性的話管削，需要從參數(shù)里面獲取
- 所以說react里面可以通過這個(gè)鉤子函數(shù)來去提升react性能
shouldComponentUpdate(nextProps, nextState){
//根據(jù)自定義條件進(jìn)行一個(gè)判斷
if(this.props.flag !== nextProps.flag){ //之前的屬性值與最新的屬性值如果不一樣的話才會(huì)返回true
return true
}
return false
}
getSnapshotBeforeUpdate()
getSnapshotBeforeUpdate() 在最近一次渲染輸出（提交到 DOM 節(jié)點(diǎn)）之前調(diào)用撑螺。它使得組件能在發(fā)生更改之前從 DOM 中捕獲一些信息（例如，滾動(dòng)位置）。此生命周期的任何返回值將作為參數(shù)傳遞給 componentDidUpdate()饲做。
此用法并不常見，但它可能出現(xiàn)在 UI 處理中盆均，如需要以特殊方式處理滾動(dòng)位置的聊天線程等漱逸。
應(yīng)返回 snapshot 的值（或 null）泪姨。
說白了這個(gè)鉤子函數(shù)不常用虹脯，我已不知道他具體用來干什么的了。
componentDidUpdate()
componentDidUpdate() 會(huì)在組件更新階段的render()函數(shù)執(zhí)行完畢之后就會(huì)被立即調(diào)用循集。首次渲染不會(huì)執(zhí)行此方法。當(dāng)組件更新后疆柔，可以在此處對(duì) DOM 進(jìn)行操作。因?yàn)檫@個(gè)鉤子函數(shù)的執(zhí)行代表著頁面DOM結(jié)構(gòu)已經(jīng)渲染完畢了旷档，可以拿到真實(shí)dom節(jié)點(diǎn)歇拆，這時(shí)候我們可以進(jìn)行實(shí)例化或者初始化操作。這里面有一個(gè)prevProps參數(shù)故觅，是代表拿到之前的狀態(tài)，我們也可以對(duì)之前的狀態(tài)進(jìn)行一個(gè)操作输吏，拿之前的狀態(tài)與現(xiàn)在的狀態(tài)進(jìn)行一個(gè)判斷，然后執(zhí)行相應(yīng)的業(yè)務(wù)邏輯贯溅。我們也可以在這個(gè)函數(shù)里面進(jìn)行數(shù)據(jù)請(qǐng)求。
注意：
- 如果shouldComponentUpdate()函數(shù)返回false译柏，這個(gè)函數(shù)就不會(huì)執(zhí)行。
componentDidUpdate(prevProps){
//數(shù)據(jù)改變引發(fā)的真實(shí)dom結(jié)構(gòu)已經(jīng)掛載完畢了
this.swiper = new Swiper ('.swiper-container', {
loop: true, // 循環(huán)模式選項(xiàng)
// 如果需要分頁器
pagination: {
el: '.swiper-pagination',
}
})
}
