摘要：本文主要介紹之后的生命周期。該方法有兩個參數和返回值為對象不需要返回整體，把需要改變的返回即可。必須有一個返回值，返回的數據類型可以有。此生命周期主要用于優化性能。最后，說明一點這三個生命周期在未來版本中會被廢棄。

React16.3.0開始，生命周期進行了一些變化。本文主要介紹React16.3.0之后的生命周期。

16版本之前的react組件的生命周期相信大家已經很熟悉。16版本的react對組件的生命周期函數進行了一些修改,下面進行詳細說明。

創建期:

constructor(props, context)

componentWillMount()

render()

componentDidMount()

運行時:

props發生變化時

componentWillReceiveProps(nextProps, nextContext)

shouldComponentUpdate(nextProps, nextState, nextContext)

componentWillUpdate(nextProps, nextState, nextContext)

render

componentDidUpdate(prevProps, prevState, snapshot)

state發生變化時

shouldComponentUpdate(nextProps, nextState, nextContext)

componentWillUpdate(nextProps, nextState, nextContext)

render

componentDidUpdate(prevProps, prevState, snapshot)

卸載時

componentWillUnmount()

創建期:

constructor(props, context)

static getDerivedStateFromProps(props, status)

render()

componentDidMount()

或者如下生命周期:

constructor(props, context)

componentWillMount() / UNSAFE_componentWillMount()

render()

componentDidMount()

注意: getDerivedStateFromProps/getSnapshotBeforeUpdate 和 componentWillMount/componentWillReceiveProps/componentWillUpdate 如果同時存在，React會在控制臺給出警告信息，且僅執行 getDerivedStateFromProps/getSnapshotBeforeUpdate 【React@16.7.0】

運行時:

props發生變化時

static getDerivedStateFromProps(props, status)

shouldComponentUpdate(nextProps, nextState, nextContext)

render

getSnapshotBeforeUpdate(prevProps, prevState)

componentDidUpdate(prevProps, prevState, snapshot)

或者如下生命周期:

componentWillReceiveProps(nextProps, nextContext)/UNSAFE_componentWillReceiveProps

shouldComponentUpdate(nextProps, nextState, nextContext)

componentWillUpdate(nextProps, nextState, nextContext)

render

componentDidUpdate(prevProps, prevState, snapshot)

state發生變化時

static getDerivedStateFromProps(props, status)

shouldComponentUpdate(nextProps, nextState, nextContext)

render

getSnapshotBeforeUpdate(prevProps, prevState)

componentDidUpdate(prevProps, prevState, snapshot)

或者如下生命周期:

shouldComponentUpdate(nextProps, nextState, nextContext)

componentWillUpdate(nextProps, nextState, nextContext)/UNSAFE_componentWillUpdate

render

componentDidUpdate(prevProps, prevState, snapshot)

銷毀時

componentWillUnmount()

新的生命周期圖示:

constructor生命周期，如不需要，可缺省。通常會在 constructor 方法中初始化 state 和綁定事件處理程序。
但是，如果寫了constructor，那么必須在其中調用super(props);否則可能會引起報錯。

如:

class Base extends Component {
    constructor(props) {
        super();  //應該為 super(props);
    }
    state = {
        name: this.props.name
    }
    //....code
}

拋出異常: Uncaught TypeError: Cannot read property "name" of undefined.

同樣，如果定義了context,在state中需要使用this.context去獲取context上的內容，則需要super(props, context);

不過，如果你缺省constructor,那么在state中，可以放心的使用 this.props 或者是 this.context，不會引起報錯。

class Base extends Component {
    state = {
        name: this.props.name,
        color: this.context.color
    }
    //....code
}

初始化的state同樣可以在constructor中定義。如果需要給方法綁定this，那么統一在constructor中進行。

當組件的state需要根據props來改變的時候可調用此方法。這個方法是在 render() 前會被執行，每次觸發render前，都會觸發此方法。

該方法有兩個參數props和state; 返回值為state對象, 不需要返回整體state，把需要改變的state返回即可。如果不需要，可以返回null.

class Base extends Component {
    state = {
        age: 20
    }
    static getDerivedStateFromProps(props, state) {
        return {
            age: 50
        }
    }
    render() {
        // 50
        return (
            
{this.state.age}
        )
    }
}

這個方法允許組件基于 props 的變更來更新其內部狀態,以這種方式獲得的組件狀態被稱為派生狀態。應該謹慎使用派生狀態，可能會引入潛在的錯誤

React組件中必須要提供的方法。當state或者props任一數據有更新時都會執行。

render() 是一個純函數，因此，不要在其中執行setState諸如此類的操作。render必須有一個返回值，返回的數據類型可以有:

null、String、Number、Array、Boolean。

React elements

Fragment

Portal

注意不要在render中調用setState

componentDidMount()方法是在組件加載完后立即執行，也就是當該組件相關的dom節點插入到dom樹中時。該方法在組件生命中只執行一次。
一般情況，我們會在這里setState(),或者進行接口請求，設置訂閱等。

class Base extends Component {
    state = {
        age: 20
    }
    componentDidMount() {
        this.fetchDate();
    }
    render() {
        return (
            
{this.state.age}
        )
    }
    //other code
}

在渲染新的props或state前，shouldComponentUpdate被調用，默認返回true。forceUpdate()時不會調用此方法。

如果shouldComponentUpdate()返回false，那么getSnapshotBeforeUpdate,render和componentDidUpdate不會被調用。

此生命周期主要用于優化性能。

在render()的輸出被渲染到DOM之前被調用。使組件能夠在它們被更改之前捕獲當前值（如滾動位置）。這個生命周期返回的任何值都將作為第三個參數傳遞給componentDidUpdate().

在更新發生后調用 componentDidUpdate()。當組件更新時，將此作為一個機會來操作DOM。如將當前的props與以前的props進行比較（例如，如果props沒有改變，則可能不需要網絡請求。

如果組件使用 getSnapshotBeforeUpdate()，則它返回的值將作為第三個“快照”參數傳遞給 componentDidUpdate()。否則，這個參數是undefined。

在組件被卸載并銷毀之前立即被調用。在此方法中執行任何必要的清理，例如使定時器無效，取消網絡請求或清理在componentDidMount（）中創建的任何監聽。

最后，說明一點:

componentWillUpdate,componentWillReceiveProps,componentWillUpdate這三個生命周期在React未來版本中會被廢棄。

而UNSAFE_componentWillUpdate,UNSAFE_componentWillReceiveProps,UNSAFE_componentWillUpdate 未來版本中仍可繼續使用。

初始化階段(父組件和子組件):

運行階段:父組件props/state更新

子組件的shouldComponentUpdate返回false，則子組件其后的生命周期都不在進行，但是父組件的生命周期繼續執行。

卸載階段: 卸載父組件

如果本博文給了您一點啟發或者是幫助，請給我的github點顆Star吧:https://github.com/YvetteLau/...

參考:

https://segmentfault.com/a/11...

https://www.jianshu.com/p/514...

https://blog.csdn.net/qq_2931...