react的生命週期鉤子函式

2022-06-23 15:57:09 字數 2406 閱讀 1560

首先我們先來掌握基本單詞

掌握單詞後會更好理解和記住生命週期:

constructor ------建構函式

component ------元件

will ------將要

get ------得到

default ------預設值

initial ------最初的

unsafe ------不安全的

static ------靜態的

derived ------衍生的

should ------應該

update ------更新

unmount ------取消掛載

receive ------收到

總體分為三個階段:

1.元件掛載

(1)constructor

可以理解為元件的第一個生命週期,一般會在這裡初始化元件的內部狀態(state),如果在這裡面要使用this則必須在super()之後,如果在這裡面需要使用props,那麼需要把props作為引數傳入。

在使用react.createclass()這種方式建立元件的時期,會有倆個生命週期:

getdefaultprops()

設定預設的props,也可以用defaultprops設定元件的預設屬性。

//直接使用static defaultprops = {}這種方式來建立

getinitialstate()

在使用es6的class語法時是沒有這個鉤子函式的,可以直接在constructor中定義this.state。此時可以訪問this.props

// 現在這個已經直接在constructor裡使用this.state = {}這種方式來建立

(2)componentwillmount ------------ 17版本即將廢除

元件將要掛載,這個生命週期基本上沒有什麼用,而且react*17版本之後廢棄。

如果還想繼續使用,可以使用unsafe_componentwillmount來代替。

這個生命週期,是除了初始化之外,唯一一個能夠直接同步修改state的地方。

(3)static getderivedstatefromprops

設定了這個生命週期就不能設定componentwillmount()

這是react16.3之後新增的一個生命週期,這是一個靜態方法,靜態方法沒有this所以不能使用setstate,需要return一個物件,這個物件就相當於setstate裡面的引數。

常用於強制性的根據props來設定state

(4)render

react最重要的步驟,建立虛擬dom,進行diff演算法,更新dom樹都在此進行。此時就不能更改state了。

這裡是合成虛擬dom,可以理解為,在這裡實際上都還沒有真實的dom。

(5)componentdidmount ajax請求生成dom**********

渲染真實的dom瀏覽器,在這裡才可以得到dom。這個生命週期就是相當重要的一個生命週期,ajax請求一般都在這裡進行。

2.組建更新

分為倆種情況,state改變和props改變

如果state改變,會直接進行到元件更新的第二個shouldcomponentupdate,如果是props改變,會先走componentwillreceiveprops。

(1)componentwillreceiveprops -----17版本即將廢除

16.4之前,由於在更新階段,沒有static getderivestatefromprops這個生命週期,如果有根據props來生成的state,就需要在這裡重新設定一次。因為之前是在constructor裡面根據props來初始化的state,constructor只會執行一次,所以要在componentwillreceiveprops來修正state。在新的版本里,static getderivedstatefromprops這個生命週期不管是在裝載還是更新的時候都會觸發。因此,componentwillreceiveprops也只會工作到react17.

(2)shouldcomponentupdate 效能優化*

這個生命週期用於react的效能優化,接收倆個引數(nextprops,nextstate)通常會根據這倆個引數和this.state,this.props來進行diff演算法對比,根據比較的結果來return true或者false,如果return的是false,將不會再執行後面的生命週期。

(3)componentwillupdate -----17版本即將廢除

沒什麼卵用

(4)render

和mount階段一樣,生成虛擬dom

(5)componentdidupdate

同componentdidmount。

3.元件銷燬

(1)componentwillunmount

元件將要銷燬,這裡一般可以用來清理定時器,解綁某些事件。