React生命周期

React生命周期.png

React中組件也有生命周期，也就是說也有很多鉤子函數(shù)供我們使用, 組件的生命周期，我們會(huì)分為四個(gè)階段，初始化、運(yùn)行中、銷毀、錯(cuò)誤處理(16.3之后)

官網(wǎng)地址

一、掛載(初始化)

• constructor

1. 當(dāng)前生命周期在初始化時(shí)執(zhí)行，必須要寫super，否則this的指向會(huì)發(fā)生錯(cuò)誤。
2. this.state中存放當(dāng)前組件所需要的狀態(tài)。
3. 在constructor中傳入?yún)?shù)props，才能可以訪問this.props。

• componentWillMount

1. 在掛載前的生命周期，此時(shí)數(shù)據(jù)和模板還未結(jié)合，可以對(duì)數(shù)據(jù)做最后的更改。
2. 可以接收到外部的數(shù)據(jù)，訪問this.props。
3. 因?yàn)槭钱惒戒秩緳C(jī)制中容易產(chǎn)生bug，所以在17.0中被廢除了

• render（多）^[1]

1. 數(shù)據(jù)和模板相結(jié)合的渲染函數(shù)，執(zhí)行時(shí)會(huì)將渲染好的模板存儲(chǔ)在緩存中，當(dāng)下一次render函數(shù)渲染時(shí)進(jìn)行diff比較（將新舊DOM模板比較，根據(jù)不同更新渲染）
2. 當(dāng)this.setState或this.props改變時(shí)觸發(fā)，因此會(huì)多次執(zhí)行。
3. 通過shouldCompnentUpdate減少render函數(shù)渲染的次數(shù)，從而得到性能優(yōu)化。

• componentDidMount

1. 數(shù)據(jù)和模板結(jié)合完畢，已經(jīng)掛載到頁面上，此時(shí)可以獲取到真實(shí)的DOM結(jié)構(gòu)。
2. 進(jìn)行前后端數(shù)據(jù)的交互、方法的實(shí)例化（swiper）
3. 父組件中的數(shù)據(jù)修改，子組件重新執(zhí)行componentDidMount

• getDerivedStateFromProps

通常在子組件中定義，可以拿到父組件傳遞的屬性，同時(shí)可以拿到當(dāng)前組件的state

static getDerivedStateFromProps(props,state){
    return{
        ...props,
        ...state,
    }
}

• React如何訪問真實(shí)的DOM節(jié)點(diǎn)

  • 第一種

   <h2 ref="dom">title</h2>
   componentDidMound(){
     console.log(this.refs.dom);
   }
  

  • 第二種

  給當(dāng)前元素添加一個(gè)屬性，值為當(dāng)前DOM節(jié)點(diǎn)

   <h2 ref={(value)=>{this.dom=value}}>title</h2>
   componentDidMound(){
       console.log(this.dom);
   }
  

二、更新

• componentWillReceiveProps（多）

1. 當(dāng)props的數(shù)據(jù)發(fā)生改變時(shí)執(zhí)行，有參數(shù)：新的props
2. 當(dāng)前生命周期在17.x的版本中被廢除掉了

• shouldComponentUpdate（多）

1. 當(dāng)前生命周期，必須return布爾值，當(dāng)值為true時(shí)繼續(xù)執(zhí)行下面的生命周期，為false時(shí)不再執(zhí)行
2. 當(dāng)前生命周期有兩個(gè)參數(shù)，新的props和state，根據(jù)新的props/state與舊的比較，從而減少render函數(shù)渲染的次數(shù)。
3. shouldComponentUpdate這個(gè)生命周期決定了render函數(shù)是否渲染（return false時(shí)不渲染），而不是決定數(shù)據(jù)是否更新。（因?yàn)閿?shù)據(jù)是一定會(huì)更新的，它只能決定是否渲染更新后的數(shù)據(jù)）
4. 強(qiáng)制更新this.foreUpdate()

• getSnapshotBeforeUpdate()

在最近一次渲染輸出（提交到 DOM 節(jié)點(diǎn)）之前調(diào)用。它使得組件能在發(fā)生更改之前從 DOM 中捕獲一些信息（例如，滾動(dòng)位置）。此生命周期的任何返回值將作為參數(shù)傳遞給 componentDidUpdate()。

• componentWillUpdate（多）

1. 數(shù)據(jù)更新時(shí)執(zhí)行，有兩個(gè)參數(shù)：新的props和state，可以對(duì)更新的數(shù)據(jù)做最后的更改
2. 不能在這里調(diào)用this.setState（會(huì)執(zhí)行shouldComponentUpdate，再進(jìn)調(diào)用自身，造成死循環(huán)）
3. 在17.0版本中被廢除了

• componentDidUpdate（多）

1. 數(shù)據(jù)更新完成后執(zhí)行，可以獲取到最新的DOM結(jié)構(gòu)(切記加邊界條件)
2. 當(dāng)前生命周期中會(huì)有2個(gè)參數(shù)：舊props和state

三、卸載

• componentWillUnmount

組件被卸載時(shí)執(zhí)行的生命周期，可以在這里做性能優(yōu)化。

（eg：事件解綁、定時(shí)器的移除）

四、總結(jié)

• React中第一次執(zhí)行的生命周期有哪些？

  1. constructor
  2. componentWillMount
  3. render
  4. componentDidmount

• 執(zhí)行一次的生命周期有哪些？

  1. constructor
  2. componentWillMount
  3. componentDidMount
  4. componentWillUnmount

• 執(zhí)行多次的聲明周期有哪些？

  1. componentWillRecevieProps
  2. shouldComponentUpdate
  3. componentWillUpdate
  4. render
  5. componentDidUpdate

• 當(dāng)this.props執(zhí)行的時(shí)候會(huì)執(zhí)行哪些生命周期？

  1. componentWillRecevieProps
  2. shouldComponentUpdate
  3. componentWillUpdate
  4. render
  5. componentDidUpdate

• 當(dāng)this.setState執(zhí)行的時(shí)候會(huì)執(zhí)行哪些生命周期？

  1. shouldComponentUpdate
  2. componentWillUpdate
  3. render
  4. componentDidUpdate

1. 多，表示當(dāng)前聲明周期會(huì)多次執(zhí)行 ?