捋一捋React的生命周期

MobService 發(fā)布于2019-08-23 15:20 / 3365人閱讀

摘要：卸載階段組件卸載和銷毀老版生命周期之前的生命周期初始化階段涉及個(gè)鉤子函數(shù)這些方法會(huì)在組件初始化的時(shí)候被調(diào)用，只跟實(shí)例的創(chuàng)建有關(guān)。

前言：React 的版本從 v15 到 v16.3 ，再到v16.4，現(xiàn)在最新的版本是 v16.8了。其中最大的變化可能是React Hooks的加入，而最令人困惑的卻是它的生命周期，新舊生命周期函數(shù)混雜在一起，難免會(huì)讓許多新來(lái)者有很多困惑。所以這一篇我們來(lái)分析一下 React 生命周期的演變及原因，進(jìn)一步理解其使用。

組件生命周期的四個(gè)階段

Initialization （初始化階段：組件實(shí)例的創(chuàng)建）

Mounting （加載階段：組件插入 dom中）

Updating （更新階段：屬性或狀態(tài)每改變一次都將會(huì)觸發(fā)一次，組件重新渲染。）

Unmounting （卸載階段：組件卸載和銷毀）

老版生命周期（16.3之前的生命周期）

Initialization （初始化階段：涉及4個(gè)鉤子函數(shù)）

這些方法會(huì)在組件初始化的時(shí)候被調(diào)用，只跟實(shí)例的創(chuàng)建有關(guān)。
如果用createReactClass進(jìn)行創(chuàng)建，則還有getInitialState這些生命周期函數(shù)，但很少使用，我們這里不提及。

static defaultProps{} （getDefaultProps()）

定義默認(rèn)props，會(huì)和父組件傳下來(lái)的props進(jìn)行合并，且以父組件中的props優(yōu)先級(jí)更高，相當(dāng)于{...defaultProps, props}。

static propTypes{} （getInitialState()）

定義props的數(shù)據(jù)類型，可以幫助我們確定其有效性，減少許多開發(fā)中不必要的錯(cuò)誤。

constructor()

在加載階段前調(diào)用一次，進(jìn)行 state 的初始化。

constructor(props){
    super(props)
}

super(props)用來(lái)調(diào)用父類的構(gòu)建方法。

Mounting （加載階段：涉及3個(gè)鉤子函數(shù)） componentWillMount()

新版中為UNSAFE_componentWillMount()。

只在組件加載時(shí)調(diào)用，整個(gè)生命周期只調(diào)用一次，以后組件更新也不會(huì)調(diào)用，此時(shí)可以修改 state。

render()

react 中最重要的生命周期函數(shù)，創(chuàng)建虛擬 dom，并進(jìn)行 diff 算法，更新 dom 樹也在此進(jìn)行。所以不應(yīng)該在此改變組件的狀態(tài)或者與瀏覽器進(jìn)行交互。

注意：這個(gè)函數(shù)不能缺少，如果不創(chuàng)建虛擬 dom，可以return null。

componentDidMount()

組件加載完成后立即調(diào)用，整個(gè)生命周期只調(diào)用一次，可以獲取到更新后的 DOM，在此處可以進(jìn)行網(wǎng)絡(luò)請(qǐng)求等。

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

新版中為UNSAFE_componentWillReceiveProps()。

在組件加載后，如果有新的props傳遞過(guò)來(lái)，會(huì)先調(diào)用這個(gè)函數(shù)，可以在這里調(diào)用setState()修改state。

componentWillReceiveProps(nextProps)

shouldComponentUpdate()

react中一個(gè)重要的性能優(yōu)化點(diǎn)，組件接收到新的props或者state，返回true表示需要更新 dom，返回false阻止更新。

shouldComponentUpdate(nextProps, nextState)

componentWillUpdate()

新版中為UNSAFE_componentWillUpdate()。

組件加載時(shí)不調(diào)用，只有在組件需要更新（即shouldComponentUpdate返回true）時(shí)調(diào)用。

componentWillUpdate(nextProps, nextState)

注意：不能在這個(gè)方法中調(diào)用setState()修改state。

render()

同上。

componentDidUpdate()

在組件更新完成后立即被調(diào)用，可以進(jìn)行網(wǎng)絡(luò)請(qǐng)求等。

componentDidUpdate(prevProps, prevState)

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

在組件被卸載和銷毀之前調(diào)用，可以在這里處理任何必要的清理工作，比如解除定時(shí)器，取消已經(jīng)發(fā)起的網(wǎng)絡(luò)請(qǐng)求，清理在componentDidMount函數(shù)中創(chuàng)建的 DOM 元素。

componentWillUnmount()

Error Handling（錯(cuò)誤處理：涉及1個(gè)鉤子函數(shù)） componentDidCatch()

錯(cuò)誤邊界捕獲，在v16.0剛推出的時(shí)候新增加的一個(gè)生命周期函數(shù)，用于捕獲在子組件樹中任意地方發(fā)生的 JavaScript 錯(cuò)誤，一個(gè)錯(cuò)誤邊界不能捕獲它自己內(nèi)部的錯(cuò)誤。

componentDidCatch(error, info)

組件的基本寫法

import React, {Component} from "React"

export default class OldReactComponent extends Componet{
    static defaultProps={}
    static propTypes={}
    constructor(props){
        super(props)
    }
    state={}
    componentWillMount(){}
    render(){
        return null
    }
    componentDidMount(){}
    componentWillReceivePorps(nextProps){}
    componentShouldUpdate(nextProps,nextState){
        return true
    }
    componentWillUpdate(nextProps,nextState){}
    componentDidUpdate(){}
    componentWillUnmount(){}
}

新版生命周期（16.4之后的生命周期）

（帶UNSAFE_的函數(shù)在以后將會(huì)被丟棄，官方也不建議使用，這里不再列出。）

新版本中，新增了三個(gè)生命周期函數(shù)：

static getDerivedStateFromProps()

getSnapshotBeforeUpdate

static getDerivedStateFromError()

同時(shí)deprecate了一組生命周期API，包括：

componentWillReceiveProps

componentWillMount

componentWillUpdate

可以看出除了shouldComponentUpdate之外，render 之前的所有生命周期都被消滅了。原因是這些生命周期太多時(shí)候沒(méi)有被正確使用，而且在Fiber之后，如果要開啟async rendering，在render函數(shù)之前的所有函數(shù)，都有可能被執(zhí)行多次。

Initialization （初始化階段：涉及4個(gè)鉤子函數(shù)）

同上。

Mounting （加載階段：涉及3個(gè)鉤子函數(shù)） static getDerivedStateFromProps()

因?yàn)槭庆o態(tài)方法，所以無(wú)法訪問(wèn)到組件實(shí)例。每次組件調(diào)用render前都會(huì)被調(diào)用，獲取新的props和state（v16.3只會(huì)為props的而調(diào)用，v16.4修正為props和state)之后，返回一個(gè)對(duì)象作為新的state，如果返回null則表示不需要更新；配合componentDidUpdate，可以覆蓋componentWillReceiveProps的所有用法。并且它應(yīng)該是個(gè)純函數(shù)，沒(méi)有副作用(side effect)。

static getDerivedStateFromProps(props,state)

render()

同上。

componentDidMount()

同上。

Updating （更新階段：涉及5個(gè)鉤子函數(shù)） static getDerivedStateFromProps()

同上。

shouldComponentUpdate()

同上。

render()

同上。

getSnapshotBeforeUpdate()

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

getSnapshotBeforeUpdate(prevProps, prevState)

componentDidUpdate()

同上。

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

同上。

Error Handling（錯(cuò)誤處理：涉及2個(gè)鉤子函數(shù)） componentDidCatch()

同上。

static getDerivedStateFromError()

用于在“render”階段（非render函數(shù)）的錯(cuò)誤捕獲，應(yīng)該是個(gè)純函數(shù)，沒(méi)有副作用(side effect)。

static getDerivedStateFromError(error)

組件的基本寫法

import React, {Component} from "React"

export default class OldReactComponent extends Componet{
    static defaultProps={}
    static propTypes={}
    constructor(props){
        super(props)
    }
    state={}
    static getDerivedStateFromProps(props,state){}
    render(){
        return null
    }
    componentDidMount(){}
    componentShouldUpdate(nextProps,nextState){
        return true
    }
    getSnapshotBeforeUpdate(prevProps, prevState){}
    componentDidUpdate(){}
    componentWillUnmount(){}
}

總結(jié)

React新的生命周期新增static getDerivedStateFromProps、getSnapshotBeforeUpdate并棄用componentWillMount，componentWillReceiveProps，componetWillUpdate（這三個(gè)函數(shù)將在 React 17中刪除）。

新增static getDerivedStateFromError捕獲“render”階段的錯(cuò)誤。

參考

幫你理清React的生命周期

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

React v16.3之后的組件生命周期函數(shù)

清晰大圖請(qǐng)點(diǎn)擊這里

云服務(wù)器 GPU云服務(wù)器捋一捋線程的生命周期 bug的生命周期 activity的生命周期

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101888.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

MobService

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

canvas應(yīng)用一：簡(jiǎn)易時(shí)鐘

閱讀 1622·2019-08-30 13:18
二列布局

閱讀 1600·2019-08-29 12:19
ajax請(qǐng)求中的contentType和dataType

閱讀 2152·2019-08-26 13:57
React-Redux 中文文檔

閱讀 4171·2019-08-26 13:22
代理模式

閱讀 1219·2019-08-26 10:35
javascript設(shè)計(jì)模式學(xué)習(xí)筆記之命令模式

閱讀 3017·2019-08-23 18:09
Docker打包nodejs項(xiàng)目和數(shù)據(jù)庫(kù)

閱讀 2553·2019-08-23 17:19
JavaScript 閉包指南

閱讀 712·2019-08-23 17:18

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

捋一捋React的生命周期

相關(guān)文章

捋一捋服務(wù)器端渲染和客戶端渲染的區(qū)別

捋一捋服務(wù)器端渲染和客戶端渲染的區(qū)別

捋一捋Python中的List（下）

捋一捋這些年一起薅過(guò)的羊毛 – 包含永久免費(fèi)vps、域名等

你還認(rèn)為JS中萬(wàn)物皆對(duì)象？

發(fā)表評(píng)論

0條評(píng)論

MobService

男|高級(jí)講師

TA的文章

canvas應(yīng)用一：簡(jiǎn)易時(shí)鐘

二列布局

ajax請(qǐng)求中的contentType和dataType

React-Redux 中文文檔

代理模式

javascript設(shè)計(jì)模式學(xué)習(xí)筆記之命令模式

Docker打包nodejs項(xiàng)目和數(shù)據(jù)庫(kù)

JavaScript 閉包指南

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

捋一捋React的生命周期

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！