組件的生命周期是什么？

1、生命周期的概念

1.1、概念

在組件創建、組件屬性更新、組件被銷毀的過程中，總是伴隨著各種各樣的函數執行，這些在組件特定時期，被觸發執行的函數，統稱為組件的生命周期函數。

1.2、組件生命周期三個階段

1. 加載階段（Mounting）：在組件初始化時執行，有一個顯著的特點：創建階段生命周期函數在組件的一輩子中只執行一次；

2. 更新階段（Updating）：屬性和狀態改變時執行，根據組件的state和props的改變，有選擇性的觸發0次或多次；

3. 卸載階段（Unmounting）：在組件對象銷毀時執行，一輩子只執行一次；

2、舊的生命周期

2.1、Mounting（加載階段：涉及6個鉤子函數）

constructor()

加載的時候調用一次，可以初始化state

getDefaultProps()

設置默認的props，也可以用dufaultProps設置組件的默認屬性。

getInitialState()

初始化state，可以直接在constructor中定義this.state

componentWillMount()

組件加載時只調用，以后組件更新不調用，整個生命周期只調用一次，此時可以修改state

render()

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

componentDidMount()

組件渲染之后調用，只調用一次

2.2、Updating（更新階段：涉及5個鉤子函數)

componentWillReceivePorps(nextProps)

組件加載時不調用，組件接受新的props時調用

shouldComponentUpdate(nextProps, nextState)

組件接收到新的props或者state時調用，return true就會更新dom（使用diff算法更新），return false能阻止更新（不調用render）

componentWillUpdata(nextProps, nextState)

組件加載時不調用，只有在組件將要更新時才調用，此時可以修改state

render()

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

componentDidUpdate()

組件加載時不調用，組件更新完成后調用

2.3、Unmounting（卸載階段：涉及1個鉤子函數）

componentWillUnmount()

組件渲染之后調用，只調用一次

2.4、生命周期函數代碼示例

import React, { Component } from 'react'

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

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

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

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

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

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

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

    }
}

3、新的生命周期

3.1、Mounting（加載階段：涉及4個鉤子函數）

constructor()

加載的時候調用一次，可以初始化state

static getDerivedStateFromProps(props, state)

組件每次被rerender的時候，包括在組件構建之后(虛擬dom之后，實際dom掛載之前)，每次獲取新的props或state之后；每次接收新的props之后都會返回一個對象作為新的state，返回null則說明不需要更新state；配合componentDidUpdate，可以覆蓋componentWillReceiveProps的所有用法

render()

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

componentDidMount()

組件渲染之后調用，只調用一次

3.2、Updating（更新階段：涉及5個鉤子函數)

static getDerivedStateFromProps(props, state)

組件每次被rerender的時候，包括在組件構建之后(虛擬dom之后，實際dom掛載之前)，每次獲取新的props或state之后；每次接收新的props之后都會返回一個對象作為新的state，返回null則說明不需要更新state；配合componentDidUpdate，可以覆蓋componentWillReceiveProps的所有用法

shouldComponentUpdate(nextProps, nextState)

組件接收到新的props或者state時調用，return true就會更新dom（使用diff算法更新），return false能阻止更新（不調用render）

render()

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

getSnapshotBeforeUpdate(prevProps, prevState)

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

componentDidUpdate()

組件加載時不調用，組件更新完成后調用

3.3、Unmounting（卸載階段：涉及1個鉤子函數）

componentWillUnmount()

組件渲染之后調用，只調用一次

3.4、Error Handling(錯誤處理)

componentDidCatch(error，info)

任何一處的javascript報錯會觸發

3.5、新生命周期函數代碼示例

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 (
            <h3>New React.Component</h3>
        )
    }
    componentDidMount() { // 掛載后

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

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

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

    }
}

4、總結

舊的生命周期

新的生命周期

1. React16新的生命周期棄用了componentWillMount、componentWillReceivePorps，componentWillUpdate
2. 新增了getDerivedStateFromProps、getSnapshotBeforeUpdate來代替棄用的三個鉤子函數（componentWillMount、componentWillReceivePorps，componentWillUpdate）
3. React16并沒有刪除這三個鉤子函數，但是不能和新增的鉤子函數（getDerivedStateFromProps、getSnapshotBeforeUpdate）混用，React17將會刪除componentWillMount、componentWillReceivePorps，componentWillUpdate
4. 新增了對錯誤的處理（componentDidCatch）