綠色的React16❤生命週期❤之實踐出真知

以前面試過一些大廠，面試官對react的生命週期的知識點問來問去，問的都不知道react仍是本身內心的那個react了嗎？在使用過程當中還要這麼多套路嗎？

首先看下官方給出React16.4生命週期圖

官方地址連接： 生命週期

看完這個圖，腦子有沒有清楚些？能夠看下面來加深印象

1、準備react運行環境

我選擇的是使用 create-react-app建立的項目， 你們也可使用 codesandbox ， 地址： codesandbox.io/s/wizardly-…

成功建立項目啓動後開始實踐吧！

插播廣告：是否是感受這個項目的綠色和以前的藍色不同了，可使用
npx create-react-app project建立最新的項目試一試哦！

插播知識點：
getDerivedStateFromProps 會在調用 render 方法以前調用，而且在初始掛載及後續更新時都會被調用。它應返回一個對象來更新 state，若是返回 null 則不更新任何內容。

getSnapshotBeforeUpdate() 在最近一次渲染輸出（提交到 DOM 節點）以前調用。它使得組件能在發生更改以前從 DOM 中捕獲一些信息（例如，滾動位置）。今生命週期的任何返回值將做爲參數傳遞給 componentDidUpdate()。

每一個生命週期詳細介紹：

react.docschina.org/docs/react-…

2、開始實踐

根據理解的思路咱們分爲幾個假設來進行

假設一：一個組件的生命週期無修改流程

測試這個流程，咱們把全部的生命週期羅列起來並打印全部的生命週期。

而後發現報了一堆警告⚠️從上到下說下第一個

仍是這三個生命週期的警告⚠️因爲即將刪除這三個生命週期咱們在使用的過程當中須要在生命週期前加UNSAFE_ 例如 ：UNSAFE_componentWillMount

爲了正常進行，咱們須要註釋先註釋掉getDerivedStateFromProps getSnapshotBeforeUpdate

並給三個即將廢棄的生命週期加上UNSAFE_在運行

得真理，無修改的狀況下，舊的生命週期執行順序爲

constructor ->UNSAFE_componentWillMount-> render -> componentDidMount

得真理，無修改的狀況下，React16.4的生命週期執行順序爲

constructor -> getDerivedStateFromProps -> render -> componentDidMount

假設二：一個組件的修改了state，生命週期執行順序

測試流程：聲明一個newState默認值爲0

this.state = {
      newState: 0
    };
changeState = () => {
    this.setState({
      newState: 1
    })
  }


複製代碼

經過按鈕改變newState值

<button onClick={this.changeState}>修改state</button>複製代碼

得真理，修改state的狀況下，舊的生命週期執行順序爲

建立一個組件Unmount在App中引用

//app組件 
<Unmount newState={this.state.newState} />


class Unmount extends Component {
  //此處用componentDidMount作表明，測試銷燬組件是否執行這個生命週期
  componentDidMount() {
    console.log("Unmount -> componentDidMount")
  }
  componentWillUnmount() {
    console.log("Unmount -> componentWillUnmount")
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    console.log("Unmount -> UNSAFE_componentWillReceiveProps", nextProps)
  }
  render() {
    return (
      <div>Unmount</div>
    );
  }
}
複製代碼

得真理，修改state的狀況下，React16.4的生命週期執行順序爲

插播廣告：若是 shouldComponentUpdate的結果 return false

則生命週期只執行 getDerivedStateFromProps -> shouldComponentUpdate ->❌（結束）

假設三：組件銷燬時的生命週期執行順序

測試流程：當App中state<2時銷燬組件Unmount

//App組件

changeState = () => {
    this.setState({
      newState: this.state.newState + 1
    })
}

{this.state.newState < 2 ? <Unmount /> : null}
複製代碼

得真理，組件銷燬時，舊的生命週期只執行componentWillUnmount

得真理，組件銷燬時，React16.4的生命週期只執行componentWillUnmount

3、最後總結

根據實踐返回到咱們剛開始看到的聲明週期執行順序對比一下,有木有更清晰