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

Nine發表於2018-10-09
React

元件生命週期的三個階段

  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

相關文章