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

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

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

創(chuàng)建期:

constructor(props, context)

componentWillMount()

render()

componentDidMount()

運(yùn)行時(shí):

props發(fā)生變化時(shí)

componentWillReceiveProps(nextProps, nextContext)

shouldComponentUpdate(nextProps, nextState, nextContext)

componentWillUpdate(nextProps, nextState, nextContext)

render

componentDidUpdate(prevProps, prevState, snapshot)

state發(fā)生變化時(shí)

shouldComponentUpdate(nextProps, nextState, nextContext)

componentWillUpdate(nextProps, nextState, nextContext)

render

componentDidUpdate(prevProps, prevState, snapshot)

卸載時(shí)

componentWillUnmount()

創(chuàng)建期:

constructor(props, context)

static getDerivedStateFromProps(props, status)

render()

componentDidMount()

或者如下生命周期:

constructor(props, context)

componentWillMount() / UNSAFE_componentWillMount()

render()

componentDidMount()

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

運(yùn)行時(shí):

props發(fā)生變化時(shí)

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發(fā)生變化時(shí)

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)

銷毀時(shí)

componentWillUnmount()

新的生命周期圖示:

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

如:

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

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

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

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

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

初始化的state同樣可以在constructor中定義。如果需要給方法綁定this，那么統(tǒng)一在constructor中進(jìn)行。

當(dāng)組件的state需要根據(jù)props來改變的時(shí)候可調(diào)用此方法。這個(gè)方法是在 render() 前會被執(zhí)行，每次觸發(fā)render前，都會觸發(fā)此方法。

該方法有兩個(gè)參數(shù)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}
        )
    }
}

這個(gè)方法允許組件基于 props 的變更來更新其內(nèi)部狀態(tài),以這種方式獲得的組件狀態(tài)被稱為派生狀態(tài)。應(yīng)該謹(jǐn)慎使用派生狀態(tài)，可能會引入潛在的錯(cuò)誤

React組件中必須要提供的方法。當(dāng)state或者props任一數(shù)據(jù)有更新時(shí)都會執(zhí)行。

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

null、String、Number、Array、Boolean。

React elements

Fragment

Portal

注意不要在render中調(diào)用setState

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

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

在渲染新的props或state前，shouldComponentUpdate被調(diào)用，默認(rèn)返回true。forceUpdate()時(shí)不會調(diào)用此方法。

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

此生命周期主要用于優(yōu)化性能。

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

在更新發(fā)生后調(diào)用 componentDidUpdate()。當(dāng)組件更新時(shí)，將此作為一個(gè)機(jī)會來操作DOM。如將當(dāng)前的props與以前的props進(jìn)行比較（例如，如果props沒有改變，則可能不需要網(wǎng)絡(luò)請求。

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

在組件被卸載并銷毀之前立即被調(diào)用。在此方法中執(zhí)行任何必要的清理，例如使定時(shí)器無效，取消網(wǎng)絡(luò)請求或清理在componentDidMount（）中創(chuàng)建的任何監(jiān)聽。

最后，說明一點(diǎn):

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

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

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

運(yùn)行階段:父組件props/state更新

子組件的shouldComponentUpdate返回false，則子組件其后的生命周期都不在進(jìn)行，但是父組件的生命周期繼續(xù)執(zhí)行。

卸載階段: 卸載父組件

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

參考:

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

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

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