解讀 React v16+ 最新生命週期使用場景

解讀 React v16+ 最新生命週期使用場景

---

React更新到v16版本之後，像是跨入了新的時代，性能和新的 API 都令人矚目，所以出現了比較大的生命週期方法調整，包括使用方法和使用場景，本章節針對新舊的生命週期的使用方法及使用場景分別詳細介紹描述總結；

在介紹生命週期之前，我們首先需要搞清楚React生命週期的幾個階段：

• Mounting（加載階段）
• Updating（更新階段）
• Unmounting（卸載階段）

從上面幾個生命期可以發現，非常類似與Vue的生命期：創建前後，加載前後，更新前後，銷燬前後

首先我們來了解下React更新到16後，生命週期發生了哪些更改：

• React V16.3 新增的生命週期方法

  • getDerivedStateFromProps()
  • getSnapshotBeforeUpdate()

• 逐漸廢棄的生命週期方法（目前還能使用，需要加UNSAFE_前綴）：

  • componentWillMount()
  • componentWillReceiveProps()
  • componentWillUpdate()

舊的生命週期流程

1、在舊的生命週期，我們來看看相對應的 加載、更新、卸載 過程

• Mounting 加載過程（6個）: constructor()、getDefaultProps()、getInitialState()、componentWillMount()、render()、componentDidMount()
• Updating 更新過程（5個）：componentWillReceivePorps()、shouldComponentUpdate()、componentWillUpdata()、render()、componentDidUpdate()
• Unmounting 卸載過程（1個）：componentWillUnmount()

當然這些生命週期的每個鉤子函數的作用是什麼可以查看：查看更多

2、組件的基本寫法如下：

import React, { Component } from 'react'

export default class OldReactComponent extends Component {
    constructor(props) {
        super(props)
        // getDefaultProps：接收初始props
        // getInitialState：初始化state
    }
    state = {

    }
    componentWillMount() { // 組件掛載前觸發

    }
    render() {
        return (
            <h2>Old React.Component</h2>
        )
    }
    componentDidMount() { // 組件掛載後觸發

    }
    componentWillReceivePorps(nextProps) { // 接收到新的props時觸發

    }
    shouldComponentUpdate(nextProps, nextState) { // 組件Props或者state改變時觸發，true：更新，false：不更新
        return true
    }
    componentWillUpdate(nextProps, nextState) { // 組件更新前觸發

    }
    componentDidUpdate() { // 組件更新後觸發

    }
    componentWillUnmount() { // 組件卸載時觸發

    }
}

新的生命週期流程

我們現在來看看新的生命週期，如下圖所示：

新增加的生命週期鉤子有：

• getDerivedStateFromProps()
• getSnapshotBeforeUpdate()

1、首先我們來看看這個getDerivedStateFromProps()的使用

    static getDerivedStateFromProps(nextProps, prevState) {
        //根據nextProps和prevState計算出預期的狀態改變，返回結果會被送給setState
    }

• 觸發時間(v16.4修正)：組件每次被render的時候，包括在組件構建之後(虛擬dom之後，實際dom掛載之前)，每次獲取新的props或state之後。
• 每次接收新的props之後都會返回一個對象作爲新的state，返回null則說明不需要更新state.
• 配合componentDidUpdate，可以覆蓋componentWillReceiveProps的所有用法
• getDerivedStateFromProps是一個靜態函數，所以函數體內不能訪問this，輸出完全由輸入決定。

2、 接着我們來看看getSnapshotBeforeUpdate()的使用

• 觸發時間: update發生的時候，在render之後，在組件dom渲染之前。
• 返回一個值，作爲componentDidUpdate的第三個參數。
• 配合componentDidUpdate, 可以覆蓋componentWillUpdate的所有用法。

3、在新的生命週期，我們來看看相對應的 加載、更新、卸載 過程

• Mounting 加載過程（4個）: constructor()、static getDerivedStateFromProps(props, state)、render()、componentDidMount()
• Updating 更新過程（5個）：static getDerivedStateFromProps(props, state)、shouldComponentUpdate()、render()、getSnapshotBeforeUpdate(prevProps, prevState)、componentDidUpdate()
• Unmounting 卸載過程（1個）：componentWillUnmount()
• Error Handling(錯誤處理) : componentDidCatch(error，info)

當然這些生命週期的每個鉤子函數的作用是什麼可以查看：查看更多

4、組件的基本寫法

import React, { Component } from 'react'

export default class NewReactComponent extends Component {
    constructor(props) {
        super(props)
        // getDefaultProps：接收初始props
        // getInitialState：初始化state
    }
    state = {

    }
    static getDerivedStateFromProps(props, state) { // 組件每次被rerender的時候，包括在組件構建之後(虛擬dom之後，實際dom掛載之前)，每次獲取新的props或state之後；;每次接收新的props之後都會返回一個對象作爲新的state，返回null則說明不需要更新state
        return state
    }
    componentDidCatch(error, info) { // 獲取到javascript錯誤

    }
    render() {
        return (
            <h2>New React.Component</h2>
        )
    }
    componentDidMount() { // 掛載後
        
    }   
    shouldComponentUpdate(nextProps, nextState) { // 組件Props或者state改變時觸發，true：更新，false：不更新
        return true
    }
    getSnapshotBeforeUpdate(prevProps, prevState) { // 組件更新前觸發

    }
    componentDidUpdate() { // 組件更新後觸發

    }
    componentWillUnmount() { // 組件卸載時觸發

    }
}