舊生命鉤子

輔助理解：

• 紅色框：掛載時(shí)生命鉤子
• 藍(lán)色框：更新時(shí)生命鉤子
• 綠色框：卸載時(shí)生命鉤子

掛載時(shí)

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

更新時(shí)

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

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

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

shouldComponentUpdate(){
  return false;
}

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

父組件重新render：路徑1:在父組件執(zhí)行完render()之后會(huì)被觸發(fā)。還記得嗎？我們藍(lán)色的區(qū)域是更新的生命鉤子，也就是說(shuō)第一次render()的時(shí)候不算，第二次及之后才會(huì)被觸發(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}>換車(chē)</button>
        <B car={this.state.car}/>
      </div>
    )
  }
}

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

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

新生命鉤子

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

getDerivedSateFromProps

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

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

最后，this.state.name將會(huì)被渲染成‘哈哈哈’,直接更改了state的值，且任何操作不會(huì)改變?cè)撝怠?nbsp;

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

如果return null 功能將不會(huì)受到影響 

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

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

getSnapshotBeforeUpdate

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

componentDidUpdate

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

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

到此這篇關(guān)于淺談react新舊生命周期鉤子的文章就介紹到這了,更多相關(guān)react 生命周期鉤子內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！ 

最新評(píng)論