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

chinafgj 發(fā)布于2019-08-23 12:15 / 708人閱讀

摘要：組件生命周期的三個階段加載階段更新階段卸載階段舊的生命周期加載階段涉及個鉤子函數(shù)加載的時候調(diào)用一次，可以初始化設置默認的，也可以用設置組件的默認屬性。

組件生命周期的三個階段

Mounting（加載階段）

Updating（更新階段）

Unmounting（卸載階段）

舊的生命周期

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

constructor()

加載的時候調(diào)用一次，可以初始化state

getDefaultProps()

設置默認的props，也可以用dufaultProps設置組件的默認屬性。

getInitialState()

初始化state，可以直接在constructor中定義this.state

componentWillMount()

組件加載時只調(diào)用，以后組件更新不調(diào)用，整個生命周期只調(diào)用一次，此時可以修改state

render()

react最重要的步驟，創(chuàng)建虛擬dom，進行diff算法，更新dom樹都在此進行

componentDidMount()

組件渲染之后調(diào)用，只調(diào)用一次

Updating（更新階段：涉及5個鉤子函數(shù))

componentWillReceivePorps(nextProps)

組件加載時不調(diào)用，組件接受新的props時調(diào)用

shouldComponentUpdate(nextProps, nextState)

組件接收到新的props或者state時調(diào)用，return true就會更新dom（使用diff算法更新），return false能阻止更新（不調(diào)用render）

componentWillUpdata(nextProps, nextState)

組件加載時不調(diào)用，只有在組件將要更新時才調(diào)用，此時可以修改state

render()

react最重要的步驟，創(chuàng)建虛擬dom，進行diff算法，更新dom樹都在此進行

componentDidUpdate()

組件加載時不調(diào)用，組件更新完成后調(diào)用

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

componentWillUnmount()

組件渲染之后調(diào)用，只調(diào)用一次

組件的基本寫法

import React, { Component } from "react"

export default class OldReactComponent extends Component {
    constructor(props) {
        super(props)
        // getDefaultProps：接收初始props
        // getInitialState：初始化state
    }
    state = {

    }
    componentWillMount() { // 組件掛載前觸發(fā)

    }
    render() {
        return (
            Old React.Component
        )
    }
    componentDidMount() { // 組件掛載后觸發(fā)

    }
    componentWillReceivePorps(nextProps) { // 接收到新的props時觸發(fā)

    }
    shouldComponentUpdate(nextProps, nextState) { // 組件Props或者state改變時觸發(fā)，true：更新，false：不更新
        return true
    }
    componentWillUpdate(nextProps, nextState) { // 組件更新前觸發(fā)

    }
    componentDidUpdate() { // 組件更新后觸發(fā)

    }
    componentWillUnmount() { // 組件卸載時觸發(fā)

    }
}

新的生命周期 Mounting（加載階段：涉及4個鉤子函數(shù)）

constructor()

加載的時候調(diào)用一次，可以初始化state

static getDerivedStateFromProps(props, state)

組件每次被rerender的時候，包括在組件構建之后(虛擬dom之后，實際dom掛載之前)，每次獲取新的props或state之后；每次接收新的props之后都會返回一個對象作為新的state，返回null則說明不需要更新state；配合componentDidUpdate，可以覆蓋componentWillReceiveProps的所有用法

render()

react最重要的步驟，創(chuàng)建虛擬dom，進行diff算法，更新dom樹都在此進行

componentDidMount()

組件渲染之后調(diào)用，只調(diào)用一次

Updating（更新階段：涉及5個鉤子函數(shù))

static getDerivedStateFromProps(props, state)

組件每次被rerender的時候，包括在組件構建之后(虛擬dom之后，實際dom掛載之前)，每次獲取新的props或state之后；每次接收新的props之后都會返回一個對象作為新的state，返回null則說明不需要更新state；配合componentDidUpdate，可以覆蓋componentWillReceiveProps的所有用法

shouldComponentUpdate(nextProps, nextState)

組件接收到新的props或者state時調(diào)用，return true就會更新dom（使用diff算法更新），return false能阻止更新（不調(diào)用render）

render()

react最重要的步驟，創(chuàng)建虛擬dom，進行diff算法，更新dom樹都在此進行

getSnapshotBeforeUpdate(prevProps, prevState)

觸發(fā)時間: update發(fā)生的時候，在render之后，在組件dom渲染之前；返回一個值，作為componentDidUpdate的第三個參數(shù)；配合componentDidUpdate, 可以覆蓋componentWillUpdate的所有用法

componentDidUpdate()

組件加載時不調(diào)用，組件更新完成后調(diào)用

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

組件渲染之后調(diào)用，只調(diào)用一次

Error Handling(錯誤處理)

componentDidCatch(error，info)

任何一處的javascript報錯會觸發(fā)

組件的基本寫法

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 (
            New React.Component
        )
    }
    componentDidMount() { // 掛載后
        
    }   
    shouldComponentUpdate(nextProps, nextState) { // 組件Props或者state改變時觸發(fā)，true：更新，false：不更新
        return true
    }
    getSnapshotBeforeUpdate(prevProps, prevState) { // 組件更新前觸發(fā)

    }
    componentDidUpdate() { // 組件更新后觸發(fā)

    }
    componentWillUnmount() { // 組件卸載時觸發(fā)

    }
}

總結

舊的生命周期

新的生命周期

React16新的生命周期棄用了componentWillMount、componentWillReceivePorps，componentWillUpdate

新增了getDerivedStateFromProps、getSnapshotBeforeUpdate來代替棄用的三個鉤子函數(shù)（componentWillMount、componentWillReceivePorps，componentWillUpdate）

React16并沒有刪除這三個鉤子函數(shù)，但是不能和新增的鉤子函數(shù)（getDerivedStateFromProps、getSnapshotBeforeUpdate）混用，React17將會刪除componentWillMount、componentWillReceivePorps，componentWillUpdate

新增了對錯誤的處理（componentDidCatch）

參考

React.Component

GPU云服務器云服務器 react _React 生命周期 React 源碼

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98192.html

ReactV16.3，即將更改的生命周期

摘要：我們目前的計劃是為不安全生命周期引入別名，和。從現(xiàn)在開始，只有新的生命周期名稱將起作用。從版本開始，更新以響應更改的推薦方法是使用新的靜態(tài)生命周期。注釋：本文是根據(jù)React的官方博客翻譯而成（文章地址：https://reactjs.org/blog/2018...）。主要講述了React之后的更新方向，以及對之前生命周期所出現(xiàn)的問題的總結，之后的React將逐步棄用一些生命周期和...

wendux 2019-08-22 16:28 評論0 收藏0
捋一捋React的生命周期

摘要：卸載階段組件卸載和銷毀老版生命周期之前的生命周期初始化階段涉及個鉤子函數(shù)這些方法會在組件初始化的時候被調(diào)用，只跟實例的創(chuàng)建有關。前言：React 的版本從 v15 到 v16.3 ，再到v16.4，現(xiàn)在最新的版本是 v16.8了。其中最大的變化可能是React Hooks的加入，而最令人困惑的卻是它的生命周期，新舊生命周期函數(shù)混雜在一起，難免會讓許多新來者有很多困惑。所以這一篇我們來...

MobService 2019-08-23 15:20 評論0 收藏0
淺談React Fiber

摘要：因為版本將真正廢棄這三生命周期到目前為止，的渲染機制遵循同步渲染首次渲染，更新時更新時卸載時期間每個周期函數(shù)各司其職，輸入輸出都是可預測，一路下來很順暢。通過進一步觀察可以發(fā)現(xiàn)，預廢棄的三個生命周期函數(shù)都發(fā)生在虛擬的構建期間，也就是之前。 showImg(https://segmentfault.com/img/bVbweoj?w=559&h=300); 背景前段時間準備前端招聘事項...

izhuhaodev 2019-08-26 10:43 評論0 收藏0
不了解一下React16.3之后的新生命周期？

摘要：本文主要介紹之后的生命周期。該方法有兩個參數(shù)和返回值為對象不需要返回整體，把需要改變的返回即可。必須有一個返回值，返回的數(shù)據(jù)類型可以有。此生命周期主要用于優(yōu)化性能。最后，說明一點這三個生命周期在未來版本中會被廢棄。 React16.3.0開始，生命周期進行了一些變化。本文主要介紹React16.3.0之后的生命周期。 React16.3.0之前生命周期: 16版本之前的react組件的...

468122151 2019-08-23 15:41 評論0 收藏0
React16時代，該用什么姿勢寫 React ?

摘要：的返回值將作為的參數(shù)，如果返回，則不更新，不能返回或以外的值，否則會警告。在更新之前調(diào)用，此時已更新返回值作為的第個參數(shù)一般用于獲取之前的數(shù)據(jù)語法是從的返回值，默認是的使用場景一般是獲取組建更新之前的滾動條位置。 React16 后的各功能點是多個版本陸陸續(xù)續(xù)迭代增加的，本篇文章的講解是建立在 16.6.0 版本上本篇文章主旨在介紹 React16 之后版本中新增或修改的地方，所以對于...

Reducto 2019-08-23 15:33 評論0 收藏0