首先，React生命周期分為三個階段：掛載、渲染和卸載。由三種不同的形式組成：render渲染、props改變和state改變。由兩種過程組成：掛載卸載過程、更新過程。

下面是React16.x版本之前的生命周期

舊生命周期

16.x之前的生命周期

1.掛載卸載過程

1.1.constructor()

當(dāng)組件被實例化之后，即使不手寫構(gòu)造函數(shù)，react會自動創(chuàng)建并執(zhí)行構(gòu)造函數(shù)，并且構(gòu)造函數(shù)是最先執(zhí)行的。如果手寫了構(gòu)造函數(shù)，就必須手動調(diào)用父類的構(gòu)造函數(shù)來實例化子類，否則會導(dǎo)致this指向錯誤。手寫構(gòu)造函數(shù)的目的就是為了給父類也就是this添加屬性，即使不添加任何屬性，react也會自動創(chuàng)建state，只不過此時的state為null

1.2.componentWillMount()

此生命周期函數(shù)代表組件已經(jīng)經(jīng)歷了constructor()初始化數(shù)據(jù)之后，但是組件未掛載，也就是還未渲染DOM 的時候。

1.3.componentDidMount()

此生命周期函數(shù)代表組件已經(jīng)被掛載完成，DOM節(jié)點已經(jīng)渲染完成，可以在此階段請求數(shù)據(jù)接口，返回數(shù)據(jù)之后會重新將數(shù)據(jù)渲染到組件中

1.4.componentWillUnmount ()

此過程完成組件的卸載與數(shù)據(jù)的銷毀

2.更新過程

2.1.componentWillReceiveProps (nextProps)

父組件中改變了props傳值時觸發(fā)的函數(shù), 但是此函數(shù)觸發(fā)有條件： 一、組件初次加載時不調(diào)用此函數(shù) 二、當(dāng)組件接受了新的props時才調(diào)用此函數(shù) 三、當(dāng)父組件進行更新以及父組件重新render（不管父組件的狀態(tài)有沒有改變）被調(diào)用后執(zhí)行

2.2.shouldComponentUpdate(nextProps,nextState)

此函數(shù)表示組件接收到新的props或者state時調(diào)用，需要注意的是，初次渲染此函數(shù)不會執(zhí)行。并且此函數(shù)返回bool值，返回值為true時，就會更新dom（使用diff算法更新）,當(dāng)返回值為false時就會阻止更新

此生命周期函數(shù)可以起到性能優(yōu)化的作用，因為react父組件的重新渲染會導(dǎo)致其所有子組件的重新渲染，這個時候其實我們是不需要所有子組件都跟著重新渲染的，因此需要在子組件的該生命周期中做判斷

2.3.componentWillUpdate (nextProps,nextState)

此函數(shù)表示組件加載時不調(diào)用，只有在組件將要更新時才調(diào)用，此時可以修改state

2.4.render()

react最重要的步驟，創(chuàng)建虛擬dom，進行diff算法，更新dom樹都在此進行

2.5.componentDidUpdate(prevProps,prevState)

此函數(shù)表示組件數(shù)據(jù)更新已經(jīng)完成,但是組件加載時不調(diào)用，組件更新完成后調(diào)用，需要注意的是此函數(shù)在render后執(zhí)行

新生命周期

• React生命周期新引入了兩個生命周期函數(shù)：getDerivedStateFromProps、getSnapShotBeforeUpdate，代替在17.x版本中會廢棄的生命周期方法：componentWillMount()、componentWillReceiveProps()、componentWillUpdate()。16.x中新增UNSAFE前綴為別名的三個函數(shù)UNSAFE_componentWillMount()、UNSAFE_componentWillReceiveProps()、UNSAFE_componentWillUpdate()，并在17.x版本中會保留 UNSAFE前綴為別名的三個函數(shù)

• getDerivedStateFromProps()無論是Mounting還是Updating，也無論是因為什么引起的Updating，全部都會被調(diào)用

• getSnapshotBeforeUpdate()被調(diào)用于render之后，可以讀取但無法使用DOM的時候。它使您的組件可以在可能更改之前從DOM捕獲一些信息（例如滾動位置）。此生命周期返回的任何值都將作為參數(shù)傳遞給componentDidUpdate()

結(jié)合實例可以更直觀的理解react新生命周期

import React, { Component } from 'react'

export default class NewReactComponent extends Component {
    constructor(props) {
        super(props)
        // getDefaultProps：接收初始props
        // getInitialState：初始化state
        // 當(dāng)組件被實例化之后，即使不手寫構(gòu)造函數(shù)，react會自動創(chuàng)建并執(zhí)行構(gòu)造函數(shù)，并且構(gòu)造函數(shù)是最先執(zhí)行的
        // 如果手寫了構(gòu)造函數(shù)，就必須手動調(diào)用父類的構(gòu)造函數(shù)來實例化子類，否則會導(dǎo)致this指向錯誤
        // 手寫構(gòu)造函數(shù)的目的就是為了給父類也就是this添加屬性，即使不添加任何屬性，react也會自動創(chuàng)建state，只不過此時的state為null
    }
    state = {
        age:18
    }
    static getDerivedStateFromProps=(props, state)=> {
        // 組件掛載必須要經(jīng)歷的生命周期
        // 組件每次被rerender的時候，包括在組件構(gòu)建之后(虛擬dom之后，實際dom掛載之前)，每次獲取新的props或state之后；
        // 每次接收新的props之后都會返回一個對象作為新的state，返回null則說明不需要更新state
        // 此函數(shù)是一個靜態(tài)函數(shù)，所以函數(shù)體內(nèi)不能訪問this，輸出完全由輸入決定
        console.log('static getDerivedStateFromProps(props, state)')
        console.log(props)
        console.log(state)
        return state
    }
    componentDidCatch(error, info) {
        // 獲取到j(luò)avascript錯誤

    }
    changeState=()=>{
        this.setState({
            age:22
        })
    }
    render() {
        const {age} = this.state
        const {name} = this.props
        return (
            <>
                <h4>新生命周期</h4>
                <p>props值：name:{name},age:{age}</p>
                <button onClick={this.changeState}>change state</button>
            </>
        )
    }
    componentDidMount() { 
        // 掛載后調(diào)用且只調(diào)用一次
        console.log('componentDidMount')
    }

    shouldComponentUpdate(nextProps, nextState) {
        // nextProps和nextProps的含義就是字面量的含義，代表更新之后的狀態(tài)
        // 組件Props或者state改變時觸發(fā)，true：更新，false：不更新
        console.log('shouldComponentUpdate')
        console.log(nextProps)
        console.log(nextState)
        return true
    }
    getSnapshotBeforeUpdate(prevProps, prevState) {
        // 組件更新前觸發(fā)
        // 調(diào)用順序與這個例子的順序是一樣的
        console.log('getSnapshotBeforeUpdate')
        return 'ok'
    }
    componentDidUpdate() {
        // 組件更新后觸發(fā)
        console.log('componentDidUpdate')
    }

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

    }
}

掛載

當(dāng)組件實例被創(chuàng)建并插入 DOM 中時，其生命周期調(diào)用順序如下：

• constructor()

  • static getDerivedStateFromProps()

  • render()

  • componentDidMount()

  注意:

  下述生命周期方法即將過時，在新代碼中應(yīng)該避免使用它們：

  • UNSAFE_componentWillMount()

更新

當(dāng)組件的 props 或 state 發(fā)生變化時會觸發(fā)更新。組件更新的生命周期調(diào)用順序如下：

• static getDerivedStateFromProps()

• shouldComponentUpdate()

• render()

• getSnapshotBeforeUpdate()

• componentDidUpdate()

• 注意:
  下述方法即將過時，在新代碼中應(yīng)該避免使用它們：

• UNSAFE_componentWillUpdate()

• UNSAFE_componentWillReceiveProps()

卸載

當(dāng)組件從 DOM 中移除時會調(diào)用如下方法：

• componentWillUnmount()

錯誤處理

當(dāng)渲染過程，生命周期，或子組件的構(gòu)造函數(shù)中拋出錯誤時，會調(diào)用如下方法：

• static getDerivedStateFromError()

• componentDidCatch()

參考資料：
https://react.docschina.org/docs/react-component.html#static-getderivedstatefromerror
https://segmentfault.com/a/1190000016617400?utm_source=tag-newest