大家好，我是前端西瓜哥。今天來過一下 React 類函數(shù)的生命周期。

類組件的生命周期

React 中類組件的生命周期函數(shù)，分為掛載、更新、卸載三種：

1. UNSAFE_componentWillMount：組件即將掛載（廢棄）。
2. componentDidMount：組件掛載。
3. UNSAFE_componentWillReceiveProps：父組件更新時(shí)，拿到最新 props（廢棄）。
4. shouldComponentUpdate：是否允許組件更新。
5. UNSAFE_componentWillUpdate：組件即將更新（廢棄）。
6. componentDidUpdate：組件更新。
7. componentWillUnmount：組件即將卸載銷毀。

相關(guān)的攔截器：

1. static getDerivedStateFromProps：拿到新的 props，然后對(duì)象返回值會(huì)合并到 state。

更新狀態(tài)的方法：

• setState(updater[, callback])：更新狀態(tài)，并重渲染組件。需要注意的是，即使新的狀態(tài)和舊的狀態(tài)一樣，組件還是會(huì)進(jìn)行重渲染；
• forceUpdate：強(qiáng)制更新，會(huì)跳過 shouldComponentUpdate 的判斷邏輯。該方法常用于在 state 和 props 之外的數(shù)據(jù)源更新后的 UI 重渲染。

圖示

舊版生命周期：

新版生命周期：

componentDidMount

該生命周期函數(shù)會(huì)在組件掛載的時(shí)候觸發(fā)。所謂掛載，指的是真實(shí) DOM 元素添加到文檔樹上。

使用場景是做一些初始化操作：

1. 訂閱事件。
2. 請(qǐng)求數(shù)據(jù)。

componentDidMount() {
  this.timerId = setInterval(() {
    // 輪訓(xùn)訂單是否完成等業(yè)務(wù)邏輯
  }, 800);
}

componentDidUpdate

組件更新的時(shí)候調(diào)用 componentDidUpdate。組件掛載的時(shí)候不會(huì)觸發(fā)。

該函數(shù)接收三個(gè)參數(shù)：

1. preProps：組件更新前的 props。
2. preState：組件更新前的 state。
3. snapshot：配合 getSnapshotBeforeUpdate 使用，這個(gè)方法會(huì)在每次組件更新時(shí)，將返回值保存下來作為此次的快照。參數(shù) snapshot 拿到的就是這個(gè)快照。

使用場景是放置狀態(tài)改變時(shí)需要執(zhí)行的邏輯：

1. 用戶點(diǎn)擊 tab，切換了 id，在這個(gè)生命周期下檢查 currentId 是否改變，如果改變，請(qǐng)求對(duì)應(yīng)的數(shù)據(jù)。

其實(shí)我們在業(yè)務(wù)中最常使用的生命周期函數(shù)，因?yàn)榍岸私^大多數(shù)的場景是交互導(dǎo)致狀態(tài)改變，并執(zhí)行一些行為。

例子：

componentDidUpdate(preProps, preState) {
  if (this.state.id !== preState.id) {
    fetchData(this.state.id).then(res {
      // 拿到數(shù)據(jù)后更新 state
    })
  }
}

componentWillUnmount

組件在卸載前會(huì)調(diào)用 componentWillUnmount。

通常都是做一些解除綁定的收尾工作，防止錯(cuò)誤和內(nèi)存泄漏：

1. 取消訂閱事件。
2. 關(guān)閉定時(shí)器。
3. 取消請(qǐng)求，如果當(dāng)前有請(qǐng)求還在進(jìn)行的話。
4. 執(zhí)行一些業(yè)務(wù)邏輯，比如關(guān)閉彈窗的時(shí)候保存正在編輯的數(shù)據(jù)。

例子；

componentWillUnmount() {
  clearInterval(this.timerId)
}

static getDerivedStateFromProps

從 props 得到派生的 state。getDerivedStateFromProps 在掛載和更新的階段都會(huì)被執(zhí)行，并在 render 前觸發(fā)。

它是類組件的靜態(tài)屬性，接收 props 和 state，然后它的返回值是個(gè)對(duì)象，會(huì)合并覆蓋到 state 上。

例子：

static getDerivedStateFromProps(props, state) {
  // 半受控的 input 組件，如果外部傳入 props.value 就用外部的
  // 否則用組件自己內(nèi)部的 state.value
 if (props.value) {
    return {
      value: props.value
    }
  }
}

該方法不推薦使用，很多場景其實(shí)并沒有必要用到這個(gè)方法，因?yàn)樗鼤?huì)引起 state 的突變，可讀性并不好。因?yàn)槿绻銢]看到這個(gè)方法，你可能會(huì)很奇怪 state 的改變怎么沒有符合預(yù)期。能不用就不用。

shouldComponentUpdate

接收新的 props 和 state，由開發(fā)者自行決定是否進(jìn)行重渲染。

會(huì)拿到新的 props 和 state，返回 true 表示要進(jìn)行更新和重渲染，返回 false 則中斷更新。準(zhǔn)確來說，任何返回值都可以，它們會(huì)直接作為 if 語句的判斷表達(dá)式進(jìn)行判斷。

如果返回了 false，狀態(tài)會(huì)保持之前的樣子。

強(qiáng)制更新（this.forceUpdate）不會(huì)走這個(gè)函數(shù)，因?yàn)槟愣颊f了要 “強(qiáng)制更新” 了。

shouldComponentUpdate(nextProps, nextState) {
  // setState 方法即使更新的是個(gè)相同的值，組件還是會(huì)重渲染
  // 一種防止重渲染的方法是在這里判斷新舊兩個(gè)狀態(tài)是否相同
  if(nextState.id === this.state.id){
    return false
  }
  return true
}

被廢棄的生命周期函數(shù)

一些生命周期函數(shù)因?yàn)槿菀桩a(chǎn)生 bug，以及在 react 底層重構(gòu)后可能會(huì)在一次更新中多次被觸發(fā)，現(xiàn)已廢棄，并加上 ??UNSAFE_?? 前綴。

1. UNSAFE_componentWillMount：組件即將掛載。
2. UNSAFE_componentWillReceiveProps：當(dāng)父組件更新時(shí)，該函數(shù)會(huì)被調(diào)用，并拿到最新的 props。此時(shí) props 還未變更。第一次初始化時(shí)該函數(shù)不會(huì)被觸發(fā)。該方法。
3. UNSAFE_componentWillUpdate：組件即將更新。

結(jié)尾

以上就是 React 的一些生命周期函數(shù)。