React-新的生命週期（React16版本）

組件生命週期的三個階段

1. Mounting（加載階段）
2. Updating（更新階段）
3. Unmounting（卸載階段）

舊的生命週期

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

constructor()

加載的時候調用一次，能夠初始化state

getDefaultProps()

設置默認的props，也能夠用dufaultProps設置組件的默認屬性。

getInitialState()

初始化state，能夠直接在constructor中定義this.state

componentWillMount()

組件加載時只調用，之後組件更新不調用，整個生命週期只調用一次，此時能夠修改state

render()

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

componentDidMount()

組件渲染以後調用，只調用一次

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()

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

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

componentWillUnmount()

組件渲染以後調用，只調用一次

組件的基本寫法

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() { // 組件卸載時觸發

    }
}

新的生命週期

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()

組件渲染以後調用，只調用一次

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()

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

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

組件渲染以後調用，只調用一次

Error Handling(錯誤處理)

componentDidCatch(error，info)

任何一處的javascript報錯會觸發

組件的基本寫法

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() { // 組件卸載時觸發

    }
}

總結

舊的生命週期

新的生命週期

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

參考

React.Component