React深入分析useEffect源碼
熱身準(zhǔn)備
這里不再講useLayoutEffect,它和useEffect的代碼是一樣的,區(qū)別主要是:
- 執(zhí)行時(shí)機(jī)不同;
useEffect是異步,useLayoutEffect是同步,會(huì)阻塞渲染;
初始化 mount
mountEffect
在所有hook初始化時(shí)都會(huì)通過(guò)下面這行代碼實(shí)現(xiàn)hook結(jié)構(gòu)的初始化和存儲(chǔ),這里不再講mountWorkInProgressHook方法
var hook = mountWorkInProgressHook();
在mountEffect方法中,只有這幾行代碼。先來(lái)解讀下幾個(gè)參數(shù):
- fiberFlags:有副作用的更新標(biāo)記,用來(lái)標(biāo)記hook所在的
fiber; - hookFlags:副作用標(biāo)記;
- create:使用者傳入的回調(diào)函數(shù);
- deps:使用者傳入的數(shù)組依賴;
function mountEffectImpl(fiberFlags, hookFlags, create, deps) {
// hook初始化
var hook = mountWorkInProgressHook();
// 判斷是否有傳入deps,如果有會(huì)作為下次更新的deps
var nextDeps = deps === undefined ? null : deps;
// 給hook所在的fiber打上有副作用的更新的標(biāo)記
currentlyRenderingFiber$1.flags |= fiberFlags;
// 將副作用操作存放到fiber.memoizedState.hook.memoizedState中
hook.memoizedState = pushEffect(HasEffect | hookFlags, create, undefined, nextDeps);
}
上面代碼中都有注釋,接下來(lái)我們看看React是如何存放副作用更新操作的,主要就是pushEffect方法
function pushEffect(tag, create, destroy, deps) {
// 初始化副作用結(jié)構(gòu),
var effect = {
tag: tag,
create: create, // 回調(diào)函數(shù)
destroy: destroy, // 回調(diào)函數(shù)里的return(mount時(shí)是undefined)
deps: deps, // 依賴數(shù)組
// 閉環(huán)鏈表
next: null
};
// 下面的一大段代碼看著復(fù)雜,但是有沒(méi)有很熟悉的感覺(jué)?
var componentUpdateQueue = currentlyRenderingFiber$1.updateQueue;
if (componentUpdateQueue === null) {
componentUpdateQueue = createFunctionComponentUpdateQueue();
currentlyRenderingFiber$1.updateQueue = componentUpdateQueue;
// effect.next = effect形成環(huán)形鏈表
componentUpdateQueue.lastEffect = effect.next = effect;
} else {
var lastEffect = componentUpdateQueue.lastEffect;
if (lastEffect === null) {
componentUpdateQueue.lastEffect = effect.next = effect;
} else {
var firstEffect = lastEffect.next;
lastEffect.next = effect;
effect.next = firstEffect;
componentUpdateQueue.lastEffect = effect;
}
}
return effect;
}上面這段代碼除了初始化副作用的結(jié)構(gòu)代碼外,都是我們前面講過(guò)的操作閉環(huán)鏈表,向鏈表末尾添加新的effect,該effect.next指向fisrtEffect,并且鏈表當(dāng)前的指針指向最新添加的effect。
useEffect的初始化就這么簡(jiǎn)單,簡(jiǎn)單總結(jié)一下:給hook所在的fiber打上副作用更新標(biāo)記,并且fiber.memoizedState.hook.memoizedState和fiber.updateQueue存儲(chǔ)了相關(guān)的副作用,這些副作用通過(guò)閉環(huán)鏈表的結(jié)構(gòu)存儲(chǔ)。
相關(guān)參考視頻講解:傳送門
更新 update
updateEffect
updateWorkInProgressHook在上篇文章也已講過(guò),不再詳述,主要功能就是創(chuàng)建一個(gè)帶有回調(diào)函數(shù)的newHook去覆蓋之前的hook。
function updateEffectImpl(fiberFlags, hookFlags, create, deps) {
var hook = updateWorkInProgressHook();
var nextDeps = deps === undefined ? null : deps;
var destroy = undefined;
if (currentHook !== null) {
var prevEffect = currentHook.memoizedState;
destroy = prevEffect.destroy;
if (nextDeps !== null) {
var prevDeps = prevEffect.deps;
// 比較兩次依賴數(shù)組中的值是否有變化
if (areHookInputsEqual(nextDeps, prevDeps)) {
// 和之前初始化時(shí)一樣
pushEffect(hookFlags, create, destroy, nextDeps);
return;
}
}
}
// 和之前初始化時(shí)一樣
currentlyRenderingFiber$1.flags |= fiberFlags;
hook.memoizedState = pushEffect(HasEffect | hookFlags, create, destroy, nextDeps);
}相信眼眼尖的看官已經(jīng)注意到上面代碼中有兩個(gè)pushEffect,一個(gè)沒(méi)有賦值給hook.memoizedState,一個(gè)賦值了,這兩者有什么區(qū)別呢?
先保留著這個(gè)疑問(wèn),先來(lái)了解下下面這行代碼都做了些什么,因?yàn)樗炀土藘蓚€(gè)pushEffect。
if (areHookInputsEqual(nextDeps, prevDeps)){...}
function areHookInputsEqual(nextDeps, prevDeps) {
// 沒(méi)有傳deps的情況返回false
if (prevDeps === null) {
return false;
}
// deps不是[],且其中的值有變動(dòng)才會(huì)返回false
for (var i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
if (objectIs(nextDeps[i], prevDeps[i])) {
continue;
}
return false;
}
// deps = [],或者deps里面的值沒(méi)有變化會(huì)返回true
return true;
}它會(huì)判斷兩次依賴數(shù)組中的值是否有變化以及deps是否是空數(shù)組來(lái)決定返回true和false,返回true表明這次不需要調(diào)用回調(diào)函數(shù)。
現(xiàn)在我們明白了兩次pushEffect的異同,if內(nèi)部的pushEffect是不需要調(diào)用的回調(diào)函數(shù), 外面的pushEffect是需要調(diào)用的。再來(lái)仔細(xì)看下這兩行代碼:
// if內(nèi)部的,第一個(gè)參數(shù)是hookFlags = 4 pushEffect(hookFlags, create, destroy, nextDeps); // if外部的,第一個(gè)參數(shù)是HasEffect | hookFlags = 5 hook.memoizedState = pushEffect(HasEffect | hookFlags, create, destroy, nextDeps);
這兩行代碼的區(qū)別是傳入的第一個(gè)參數(shù)不同,而第一個(gè)參數(shù)就是effect.tag的值,effect.tag = 4不會(huì)添加到副作用執(zhí)行隊(duì)列,而effect.tag = 5可以。沒(méi)有添加到副作用執(zhí)行隊(duì)列的effect就不會(huì)執(zhí)行。這樣就巧妙的實(shí)現(xiàn)了useEffect基于deps來(lái)判斷是否需要執(zhí)行回調(diào)函數(shù)。
到這里, 我們搞明白了,不管useEffect里的deps有沒(méi)有變化都會(huì)為回調(diào)函數(shù)創(chuàng)建effect并添加到effect鏈表和fiber.updateQueue中,但是React會(huì)根據(jù)effect.tag來(lái)決定該effect是否要添加到副作用執(zhí)行隊(duì)列中去執(zhí)行。
執(zhí)行副作用
我們現(xiàn)在知道了,useEffect是異步執(zhí)行的。那么這個(gè)回調(diào)函數(shù)副作用會(huì)在什么時(shí)候執(zhí)行呢?useEffect回調(diào)函數(shù)會(huì)在layout階段之后執(zhí)行?,F(xiàn)在我們來(lái)了解下具體調(diào)用執(zhí)行的流程。

我畫了一個(gè)簡(jiǎn)單的流程圖,大致描述了下調(diào)用流程。首先在mutation之前階段,基于副作用創(chuàng)建任務(wù)并放到taskQueue中,同時(shí)會(huì)執(zhí)行requestHostCallback,這個(gè)方法就涉及到了異步了,它首先考慮使用MessageChannel實(shí)現(xiàn)異步,其次會(huì)考慮使用setTimeout實(shí)現(xiàn)。使用MessageChannel時(shí),requestHostCallback會(huì)馬上執(zhí)行port.postMessage(null);,這樣就可以在異步的第一時(shí)間執(zhí)行workLoop,workLoop會(huì)遍歷taskQueue,執(zhí)行任務(wù),如果是useEffect的effect任務(wù),會(huì)調(diào)用flusnPassiveEffects。
Q:可能有人會(huì)疑惑為什么優(yōu)先考慮MessageChannel?
A: 首先我們要明白React調(diào)度更新的目的是為了時(shí)間分片,意思是每隔一段時(shí)間就把主線程還給瀏覽器,避免長(zhǎng)時(shí)間占用主線程導(dǎo)致頁(yè)面卡頓。使用MessageChannel和SetTimeout的目的都是為了創(chuàng)建宏任務(wù),因?yàn)楹耆蝿?wù)會(huì)在當(dāng)前微任務(wù)都執(zhí)行完后,等到瀏覽器主線程空閑后才會(huì)執(zhí)行。不優(yōu)先考慮setTimeout的原因是,setTimeout執(zhí)行時(shí)間不準(zhǔn)確,會(huì)造成時(shí)間浪費(fèi),即使是setTimeout(fn, 0),感興趣的可以去自己了解下,本文不做贅述了。
在schedulePassiveEffects中,會(huì)決定是否執(zhí)行effect鏈表中的effect,判斷的依據(jù)就是每個(gè)effect上的effect.tag:
function schedulePassiveEffects(finishedWork) {
var updateQueue = finishedWork.updateQueue;
var lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
if (lastEffect !== null) {
var firstEffect = lastEffect.next;
var effect = firstEffect;
// 遍歷effect鏈表
do {
var _effect = effect,
next = _effect.next,
tag = _effect.tag;
// 基于effect.tag決定是否添加到副作用執(zhí)行隊(duì)列
if ((tag & Passive$1) !== NoFlags$1 && (tag & HasEffect) !== NoFlags$1) {
enqueuePendingPassiveHookEffectUnmount(finishedWork, effect);
enqueuePendingPassiveHookEffectMount(finishedWork, effect);
}
effect = next;
} while (effect !== firstEffect);
}
}在flushPassiveEffects中,會(huì)先執(zhí)行上次更新動(dòng)作的銷毀函數(shù),然后再執(zhí)行本次更新動(dòng)作的回調(diào)函數(shù),并且會(huì)把回調(diào)函數(shù)的return作為下次更新動(dòng)作的銷毀函數(shù)。
function flushPassiveEffectsImpl() {
// 執(zhí)行上次更新動(dòng)作的銷毀函數(shù)
var unmountEffects = pendingPassiveHookEffectsUnmount;
pendingPassiveHookEffectsUnmount = [];
for (var i = 0; i < unmountEffects.length; i += 2) {
...destroy()
}
// 執(zhí)行本次更新動(dòng)作的回調(diào)函數(shù)
var mountEffects = pendingPassiveHookEffectsMount;
pendingPassiveHookEffectsMount = [];
for (var _i = 0; _i < mountEffects.length; _i += 2) {
...create()
}
}
上面代碼中的這兩行就是來(lái)自副作用執(zhí)行隊(duì)列,已經(jīng)過(guò)濾掉了不需要執(zhí)行的effect,只執(zhí)行該隊(duì)列上的副作用函數(shù)
var unmountEffects = pendingPassiveHookEffectsUnmount; var mountEffects = pendingPassiveHookEffectsMount;
總結(jié)
看完這篇文章, 我們可以弄明白下面這幾個(gè)問(wèn)題:
useEffect和useLayoutEffect的區(qū)別?useEffect是怎么判斷回調(diào)函數(shù)是否需要執(zhí)行的?useEffect是同步還是異步?useEffect是通過(guò)什么實(shí)現(xiàn)異步的?useEffect為什么要要優(yōu)先選用MessageChannel實(shí)現(xiàn)異步?
到此這篇關(guān)于React深入分析useEffect源碼的文章就介紹到這了,更多相關(guān)React useEffect內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React?split實(shí)現(xiàn)分割字符串的使用示例
當(dāng)我們需要將一個(gè)字符串按照指定的分隔符進(jìn)行分割成數(shù)組時(shí),我們可以在組件的生命周期方法中使用split方法來(lái)實(shí)現(xiàn)這個(gè)功能,本文就來(lái)介紹一下,感興趣的可以了解下2023-10-10
淺談對(duì)于react-thunk中間件的簡(jiǎn)單理解
這篇文章主要介紹了淺談對(duì)于react-thunk中間件的簡(jiǎn)單理解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
npx create-react-app xxx創(chuàng)建項(xiàng)目報(bào)錯(cuò)的解決辦法
這篇文章主要介紹了npx create-react-app xxx創(chuàng)建項(xiàng)目報(bào)錯(cuò)的解決辦法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
Vite+React+TypeScript手?jǐn)]TodoList的項(xiàng)目實(shí)踐
本文主要介紹了Vite+React+TypeScript手?jǐn)]TodoList的項(xiàng)目實(shí)踐,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
React.memo函數(shù)中的參數(shù)示例詳解
這篇文章主要為大家介紹了React.memo函數(shù)中的參數(shù)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09
React實(shí)現(xiàn)導(dǎo)入導(dǎo)出Excel文件
本文主要介紹了React實(shí)現(xiàn)導(dǎo)入導(dǎo)出Excel文件,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
React中映射一個(gè)嵌套數(shù)組實(shí)現(xiàn)demo
這篇文章主要為大家介紹了React中映射一個(gè)嵌套數(shù)組實(shí)現(xiàn)demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12
React中實(shí)現(xiàn)防抖功能的兩種方式小結(jié)
這篇文章主要介紹了React中實(shí)現(xiàn)防抖功能的兩種方式小結(jié),具有很好的 參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10

