不瞭解一下React16.3的新生命週期？

時間 2019-11-16

標籤不瞭解一下 react16.3 react 生命週期欄目 React 简体版

原文原文鏈接

React16.3.0開始，生命週期進行了一些變化。本文主要介紹React16.3.0以後的生命週期。javascript

更多文章可戳: github.com/YvetteLau/B…前端

React16.3.0以前生命週期:

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

React16.3.0以前生命週期

建立期:react

constructor(props, context)
componentWillMount()
render()
componentDidMount()

運行時:git

props發生變化時github

componentWillReceiveProps(nextProps, nextContext)
shouldComponentUpdate(nextProps, nextState, nextContext)
componentWillUpdate(nextProps, nextState, nextContext)
render
componentDidUpdate(prevProps, prevState, snapshot)

state發生變化時segmentfault

shouldComponentUpdate(nextProps, nextState, nextContext)
componentWillUpdate(nextProps, nextState, nextContext)
render
componentDidUpdate(prevProps, prevState, snapshot)

卸載時微信

componentWillUnmount()網絡

React16.3.0以後的生命週期

建立期:dom

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

新的生命週期圖示:

生命週期詳解

1.constructor(props, context)

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中進行。

2.static getDerivedStateFromProps(props, state)

當組件的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 (
            <div>{this.state.age}</div>
        )
    }
}
複製代碼

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

3.render

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

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

null、String、Number、Array、Boolean。
React elements
Fragment
Portal

注意不要在render中調用setState

4.componentDidMount

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

class Base extends Component {
    state = {
        age: 20
    }
    componentDidMount() {
        this.fetchDate();
    }
    render() {
        return (
            <div>{this.state.age}</div>
        )
    }
    //other code
}
複製代碼