React組件生命周期

認識生命周期

很多的事物都有從創建到銷毀的整個過程，這個過程稱之為是生命周期；

React組件也有自己的生命周期，了解組件的生命周期可以讓我們在最合適的地方完成自己想要的功能；

生命周期和生命周期函數的關系如下:

生命周期是一個抽象的概念，在生命周期的整個過程，分成了很多個階段；

比如裝載階段（Mount），組件第一次在DOM樹中被渲染的過程；

比如更新過程（Update），組件狀態發生變化，重新更新渲染的過程；

比如卸載過程（Unmount），組件從DOM樹中被移除的過程；

React內部為了告訴我們當前處于哪些階段，會對我們組件內部實現的某些函數進行回調，這些函數就是生命周期函數：

比如實現componentDidMount函數：組件已經掛載到DOM上時，就會回調；

比如實現componentDidUpdate函數：組件已經發生了更新時，就會回調；

比如實現componentWillUnmount函數：組件即將被移除時，就會回調；

我們可以在這些回調函數中編寫自己的邏輯代碼，來完成自己的需求功能；

我們談React生命周期時，主要談的類的生命周期，因為函數式組件是沒有生命周期函數的；（后面我們可以通過hooks來模擬一些生命周期的回調）

生命周期函數

我們先來學習一下最基礎、最常用的五個生命周期函數：

Constructor

組件中第一個調用的生命周期函數, 如果不初始化 state 或不進行方法綁定，則不需要為 React 組件實現構造函數。

constructor中通常只做兩件事情：

1. 通過給 this.state 賦值對象來初始化內部的state；
2. 為事件綁定實例（this）；

render

render函數也是組件的生命周期函數, 它的使用方法上一篇文章有講解過, 這里不再過多贅述

componentDidMount

componentDidMount() 會在組件掛載后（插入 DOM 樹中）立即調用。

componentDidMount中通常進行哪里操作呢？

1. 依賴于DOM的操作可以在這里進行；
2. 在此處發送網絡請求就最好的地方；（官方建議）
3. 可以在此處添加一些訂閱（會在componentWillUnmount取消訂閱）；

componentDidUpdate

componentDidUpdate() 會在更新后會被立即調用，首次渲染不會執行此方法。

當組件更新后，可以在此處對 DOM 進行操作；

如果你對更新前后的 props 進行了比較，也可以選擇在此處進行網絡請求；（例如，當 props 未發生變化時，則不會執行網絡請求）。

componentWillUnmount

componentWillUnmount() 會在組件卸載及銷毀之前直接調用。

在此方法中執行必要的清理操作；

例如，清除 timer，取消網絡請求或清除在 componentDidMount() 中創建的訂閱等；

上面這五個生命周期函數是我們最常用的, 它們的執行時機可以參考下面這幅圖片

首先執行constructor函數

其次執行render函數, 將render函數的結果進行渲染

緊接著會將組件掛載到DOM上, 掛載完成執行componentDimMount函數

當數據發生改變, 會重新調用render函數, 等待數據更新完成后會調用componentDidUpdate函數

組件卸載或銷毀之前, 調用componentWillUnmount

演示代碼

export class App extends Component {
  constructor() {
    console.log("constructor被調用")
    super()

    this.state = {
      message: "Hello World"
    }
  }

  btnClick() {
    this.setState({ message: "你好啊" })
  }

  render() {
    console.log("render被調用")
    const { message } = this.state
    return (
      <div>
        <button onClick={() => this.btnClick()}>按鈕</button>
        <h2>{ message }</h2>
      </div>
    )
  }

  componentDidMount() {
    console.log("componentDidMount被調用")
  }

  componentDidUpdate() {
    console.log("componentDidUpdate被調用")
  }

  componentWillUnmount() {
    console.log("componentWillUnmount被調用")
  }
}

不常用生命周期函數

除了上面介紹的生命周期函數之外，還有一些不常用的生命周期函數(注意這個不常用不是我說的, 實在React官網中, 官方列舉的)：

• 下面三個不常用的生命周期getSnapshotBeforeUpdate和shouldComponentUpdate是相對有用的

getDerivedStateFromProps：state 的值在任何時候都依賴于 props時使用；該方法返回一個對象來更新state；

getSnapshotBeforeUpdate：在React更新DOM之前回調的一個函數，可以獲取DOM更新前的一些信息（比如說滾動位置）；

shouldComponentUpdate：該生命周期表示, 是否需要重新更新render函數進行渲染, 返回true表示需要, 返回false表示不需要, 這個生命周期函數還是很常用，但是我們等待講性能優化時再來詳細講解；

另外，React中還提供了一些過期的生命周期函數，這些函數已經不推薦使用。

更詳細的生命周期相關的內容，可以參考官網: https://zh-hans.reactjs.org/docs/react-component.html