react 原理的簡單分析

2022-08-19 02:48:16 字數 4705 閱讀 4309

元件生命週期:元件從建立到掛載到頁面執行、完成複雜的元件功能、分析元件錯誤原因等。

鉤子函式的作用:為開發人員在不同的階段操作元件提供了時機。

鉤子函式:

階段順序

鉤子函式

說明建立階段

1constructor

初始化 props and state

建立階段

2componentwillmount(不安全)

元件將要掛載掛載3

render

渲染ui(不能使用setstate方法)掛載4

componentdidmount

元件掛載完成更新5

shouldcomponentupdate

詢問元件是否需要更新更新6

componentwillupdate(不安全)

元件將要更新更新7

componentdidupdate

元件更新完畢挾雜8

componentwillunmount

元件從頁面消失,執行清理工作(比如清理定時器等)

-getsnapshotbeforeupdate(新版)

在子元件更新domrefs之前,從dom中捕獲一些資訊(例如滾動位置)

-getderivedstatefromprops(新版)

-componentwillreceiveprops(不安全)

可以在子元件的render函式執行前獲取新的props

import react,  from 'react'

export default class lifecycle extends component

static defaultprops =

constructor(props) ;//初始化預設的狀態物件

console.log('1. constructor 初始化 props and state');

}//componentwillmount在渲染過程中可能會執行多次

componentwillmount()

//componentdidmount在渲染過程中永遠只有執行一次

//一般是在componentdidmount執行***,進行非同步操作

componentdidmount() );

});}

shouldcomponentupdate(nextprops, nextstate)

componentwillupdate(nextprops, nextstate)

componentdidupdate(prevprops, prevstate)

add = () => );

};render() :

+ )}

}class subcounter extends component ;

}componentwillunmount()

//呼叫此方法的時候會把新的屬性物件和新的狀態物件傳過來

shouldcomponentupdate(nextprops, nextstate) else

}//componentwillreceiveprop 元件收到新的屬性物件

componentwillreceiveprops()

render() )}

}

getsnapshotbeforeupdate: ** 接收父元件傳遞過來的props和元件之前的狀態,此生命週期鉤子必須有返回值,返回值將作為第三個引數傳遞給componentdidupdate。必須和componentdidupdate一起使用,否則會報錯

該生命週期鉤子觸發的時機:被調用於render之後、更新domrefs之前

版本遷移:

componentwillmountcomponentwillreceivepropscomponentwillupdate這三個生命週期因為經常會被誤解和濫用,所以被稱為不安全(不是指安全性,而是表示使用這些生命週期的**,有可能在未來的 react 版本中存在缺陷,可能會影響未來的非同步渲染)的生命週期。

react 16.3 版本:為不安全的生命週期引入別名unsafe_componentwillmountunsafe_componentwillreceivepropsunsafe_componentwillupdate。(舊的生命週期名稱和新的別名都可以在此版本中使用

react 16.3 之後的版本:為componentwillmountcomponentwillreceivepropscomponentwillupdate啟用棄用警告。(舊的生命週期名稱和新的別名都可以在此版本中使用,但舊名稱會記錄dev模式警告

react 17.0 版本:推出新的渲染方式——非同步渲染( async rendering),提出一種可被打斷的生命週期,而可以被打斷的階段正是實際dom掛載之前的虛擬dom構建階段,也就是要被去掉的三個生命週期componentwillmountcomponentwillreceivepropscomponentwillupdate。(從這個版本開始,只有新的「unsafe_」生命週期名稱將起作用

減輕state:

避免不必要的重新渲染:

純元件:

純元件內部對比是:shadllow compare(淺層對比)

對於值型別:比較兩個值是否相同(直接賦值即可 沒有坑)

setstate 的作用:1. 修改 state 2.更新元件ui

父元件重新渲染時,也會重新渲染子元件,但只會渲染當前元件子樹(當前元件及其所有子元件會被更新)

setstate 的執行是非同步的,如果在呼叫了setstate 方法後立即 列印 state ,state 還是原來未更新時的狀態。

state = 

this.setstate()

console.log('列印', this.state.num) // 此時列印的結果並沒有 + 1 ,還是原來的值

如果在乙個函式裡面重複呼叫多次 setstate,setstate等同於執行了一次。

state = 

this.setstate()

console.log('列印', this.state.num)

this.setstate()

// 最終 num 並沒有並更新2次變為3, 而是被更新為2

// 這是由於 num 在第一次setstate的非同步更新之後下面的**拿到值是原來的1,因此再次執行 setstate等同於在1的基礎上+4,最終 num = 5 。

如果想要在函式中多次呼叫setstate,需要用**函式的方法獲取上一次state的最新值再更新。

在setstate中獲取上一次state 的最新值可以用**函式 this.setstte( (state, props) => {} )

**如下:

state = 

this.setstate()

this.setstate((state, props) =>

})// 此時的 num = 6

在setstate中有兩個**函式 this.setstate(, callback ),第二個**函式會在第乙個**函式執行完更新後執行,因此在第二個**函式中也可以拿到state被更新後的最新值。

state = 

this.setstate(, () => )

react更新檢視的思想是:state發生變化會重新渲染檢視。

元件中只有乙個dom元素需要更新時,並不會重新渲染整個元件的內容,只會更新部分變化的地方。 而部分更新是靠虛擬dom和diff演算法來實現的。

虛擬dom本質上是乙個js物件,用來描述你希望在螢幕上看到的內容(ui)。

虛擬dom物件:

const element = 

}

虛擬dom執行過程:

初次渲染時,react會根據初始state(model)建立乙個虛擬dom物件(樹)。

根據虛擬dom生成真正dom渲染到頁面中。

當資料發生變化後(setstate()),重新根據新的資料,建立新的虛擬dom物件(樹)

與上一次得到的虛擬dom物件,使得diff演算法對比(找不同),得到需要更新的內容。

最終,react只將變化的內容更新(patch)到dom中,重新渲染到頁面。

總結:虛擬dom和diff演算法的確帶來了效能提公升,但它的真正價值從來都不是效能。最大的價值是讓react脫離了瀏覽器環境的束縛,也為跨平台提供了支援。

jquery原理的簡單分析

jquery的外衣 jquery是乙個輕量級的js框架,這點相信大部分人都聽過,而jquery之所以有這樣乙個稱呼,就是因為它悄悄披了一件外衣,將自己給隱藏了起來。以下擷取自jquery原始碼片段 function window,undefined window 上面這一小段 來自於1.9.0當中j...

CAT 原理簡單分析

簡介 cat本文簡單分析,啟動載入流程 啟動時載入catservlet 這裡分兩條線 乙個載入各個模組,如cathomemodule catconsumemodule catcoremodule等 乙個啟動乙個socket監聽,接收訊息,初始化縣城,使用consume模組的各個分析器,對訊息做不同分...

Shiro簡單授權原理分析

shiro授權簡單來說分為兩種型別 粗粒度的 也就是 中直接寫入和角色的繫結。細粒度的 中寫入的是和許可權的繫結,而角色到許可權和可配置的。對於粗粒度來說,若角色對應許可權有改變的話,那麼則需要更改 很不方便。而細粒度的好處顯而易見,所以一般專案中應該都採用細粒度的許可權配置。那麼shiro中是如何...