解讀 React v16 最新生命週期使用場景

2021-10-01 13:53:42 字數 2128 閱讀 9920

react更新到v16版本之後,像是跨入了新的時代,效能和新的api都令人矚目,所以出現了比較大的生命週期方法調整,包括使用方法和使用場景,本章節針對新舊的生命週期的使用方法及使用場景分別詳細介紹描述總結;

在介紹生命週期之前,我們首先需要搞清楚react生命週期的幾個階段:

從上面幾個生命期可以發現,非常類似與vue的生命期:建立前後,載入前後,更新前後,銷毀前後

首先我們來了解下react更新到16後,生命週期發生了哪些更改:

逐漸廢棄的生命週期方法(目前還能使用,需要加unsafe_字首):

1、在舊的生命週期,我們來看看相對應的載入更新解除安裝過程

2、元件的基本寫法如下:

import react,

from

'react'

export

default

class

oldreactcomponent

extends

component

state =

componentwillmount()

render()

componentdidmount()

componentwillreceiveporps

(nextprops)

shouldcomponentupdate

(nextprops, nextstate)

componentwillupdate

(nextprops, nextstate)

componentdidupdate()

componentwillunmount()

}

我們現在來看看新的生命週期,如下圖所示:

新增加的生命週期鉤子有:

1、首先我們來看看這個getderivedstatefromprops()的使用

static

getderivedstatefromprops

(nextprops, prevstate)

2、 接著我們來看看getsnapshotbeforeupdate()的使用

返回乙個值,作為componentdidupdate的第三個引數。

配合componentdidupdate, 可以覆蓋componentwillupdate的所有用法。

3、在新的生命週期,我們來看看相對應的載入更新解除安裝過程

4、元件的基本寫法

import react,

from

'react'

export

default

class

newreactcomponent

extends

component

state =

static

getderivedstatefromprops

(props, state)

componentdidcatch

(error, info)

render()

componentdidmount()

shouldcomponentupdate

(nextprops, nextstate)

getsnapshotbeforeupdate

(prevprops, prevstate)

componentdidupdate()

componentwillunmount()

}

SVM最通俗的解讀

摘自 什麼是svm?當然首先看一下wiki.support vector machines are learning models used for classification which individuals in a population belong where?so how do svm...

最簡單的方式解讀Linux下ssh rsa的運作

大家都知道哈,如果用 ssh keygen 就會生成2個 rsa 檔案,乙個是 id rsa 另外乙個是 id rsa.pub 第乙個是金鑰,第二個是公鑰。也就是說,第二個是鑰匙,第乙個是鎖眼,雖然他們都叫做x鑰。那也就是說,如果在一台機器上配置好rsa無密碼認證後,如果你需要移植的話,僅僅需要id...

針對物件導向介面 最詭異的解讀

1.介面最基本的作用就是作為乙個客觀的規範 是一類事物所具有的屬性的總結 相當於父類 舉例說明下 人 有身高這個屬性 有吃飯這個方法 有痛了就喊 媽呀 這個事件 ok 這樣就可以把這些屬性,方法,事件總結起來定義乙個介面 叫 人類 這裡的loghandler onlog就是乙個事件 下面會具體講到 ...