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

藤蔓繞竹發表於2019-11-25

React

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

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

官方地址連結：生命週期

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

一、準備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-…

二、開始實踐

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

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

測試這個流程，我們把所有的生命週期羅列起來並列印所有的生命週期。

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

還是這三個生命週期的警告⚠️由於即將刪除這三個生命週期我們在使用的過程中需要在生命週期前加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}
複製程式碼