淺談react新舊生命周期鉤子

更新時間：2023年12月06日 11:27:46 作者：佛系努力中……

所謂的生命周期就是指某個事物從開始到結(jié)束的各個階段,本文主要介紹了淺談react新舊生命周期鉤子,具有一定的參考價值,感興趣的可以了解一下

舊生命鉤子

在這里插入圖片描述

輔助理解：

紅色框：掛載時生命鉤子
藍色框：更新時生命鉤子
綠色框：卸載時生命鉤子

掛載時

如圖所示，我們可以看到，在組件第一次掛載時會經(jīng)歷：構(gòu)造器（constructor）=》組件將要掛載（componentWillMount）=》組件掛載渲染（render）=》組件掛載完成（componentDidMount）。

更新時

有三條路徑可以被觸發(fā)，分別是紅色、橙色和粉色。

在這里插入圖片描述

組件內(nèi)部狀態(tài)更新：路徑2：組件是否應(yīng)該更新（shouldComponentUpdate）=》組件將要更新（componentWillUpdate）=》組件更新渲染（render）=》組件更新完成（componentDidUpdate）。

shouldComponentUpdate，未顯性聲明時默認返回ture，返回false時組件無法進行更新操作。也就無法執(zhí)行××××××××》組件將要更新（componentWillUpdate）=》組件更新渲染（render）=》組件更新完成。

shouldComponentUpdate(){
  return false;
}

強制更新：路徑3：我們可以調(diào)用this.forceUpdate()實現(xiàn)強制更新，這個api和setState一樣都是React自帶的，一般這個強制更新很少用。
組件將要更新（componentWillUpdate）=》組件更新渲染（render）=》組件更新完成（componentDidUpdate）。

父組件重新render：路徑1:在父組件執(zhí)行完render()之后會被觸發(fā)。還記得嗎？我們藍色的區(qū)域是更新的生命鉤子，也就是說第一次render()的時候不算，第二次及之后才會被觸發(fā)。(componentWillReceiveProps）

import React, { Component } from 'react'

export default class A extends Component {
  state={
    car:'奧迪'
  }
  changeCar= () => {
    this.setState({
      car:'奔馳'
    })
  }
  render() {
    return (
      <div>
        <div>我是組件A</div>
        <button onClick={this.changeCar}>換車</button>
        <B car={this.state.car}/>
      </div>
    )
  }
}

class B extends Component {
  //首次渲染不會被觸發(fā)
  componentWillReceiveProps(){
    console.log('componentWillReceiveProps')
  }
  render() {
    return (
      <div>
        我是組件B,我接收到的車是：{this.props.car}
      </div>
    )
  }
}

舊生命鉤子的總結(jié)

在這里插入圖片描述

新生命鉤子

當(dāng)你充分理解舊的生命鉤子之后，看下面這張圖對你來說應(yīng)該易如反掌。大體來說用來劃分的區(qū)塊方式一致，即：創(chuàng)建時、更新時【三條路徑】、卸載時。

在這里插入圖片描述

getDerivedSateFromProps

直譯：從props哪里獲得的派生的State

1.
state ={name:'佛系努力中……'}
//注意點1：需聲明為類的靜態(tài)方法《static》
static getDerivedStateFormProps(props,state){
  //可以讀取到props,state
  //注意點2：必須return一個state對象或者null
  return {name:'哈哈哈'} 
  //或者null
}

最后，this.state.name將會被渲染成‘哈哈哈’,直接更改了state的值，且任何操作不會改變該值。

2.
state ={name:'佛系努力中……'}
static getDerivedStateFormProps(props,state){
  return null
}

如果return null 功能將不會受到影響

3.此方法使用于state的值在任何時候取決于porps
state ={name:'佛系努力中……'}
static getDerivedStateFormProps((props,state){
  return props
}

總結(jié)：這個生命周期鉤子會被用到情況很少，并且建議盡量避免使用，防止導(dǎo)致代碼冗余，并使組件難以維護。

getSnapshotBeforeUpdate

//在更新之前獲得一個快照
getSnapshotBeforeUpdate(prevProps,prevState){
    console.log("getSnapshotBeforeUpdate--",prevProps,prevState)
    return '一只小貓'
}

componentDidUpdate

//組件以及更新完畢，接收三個值，最后一個snapShot，即為getSnapshotBeforeUpdate返回值
componentDidUpdate(prevProps,prevState,snapShot){
    console.log("componentDidUpdate--",prevProps,prevState,snapShot)
 }

一個應(yīng)用場景
總結(jié)：這個東西實際應(yīng)用場景也很少，嘿嘿！

在這里插入圖片描述