React useEffect的原始碼解讀
前言
對原始碼的解讀有利於搞清楚Hooks到底做了什麼,如果您覺得useEffect很“魔法”,這篇文章也許對您有些幫助。
本篇部落格篇幅有限,只看useEffect,力求簡單明瞭,帶您到React Hooks的深處看看
按圖索驥找到Hook相關原始碼(可以直接跳)
首先我們從Github上得到react的原始碼,然後可以在packages中找到react資料夾,其中的index.js就是我們的入口。
程式碼很簡單,就兩行:
const React = require('./src/React'); module.exports = React.default || React;
所以接下來我們去看看 'react/src/React',程式碼有點多,我們簡化一下:
import ReactVersion from 'shared/ReactVersion';
// ...
import {
useEffect,
} from './ReactHooks';
const React = {
useEffect
};
//...
export default React;
很好,現在我們至少知道為什麼Hooks的引用方式是:
import {useEffect} from 'react'
接下來我們繼續看看 'react/src/ReactHooks'。
ReactHooks檔案(可以直接跳)
之前說好了只看useEffect,所以同樣需要簡化一下程式碼。
並且考慮到有人對TypeScript語法不熟悉,還去掉了TypeScript語法,之後的簡化程式碼也會如此。
現在我們看下簡化後的程式碼:
import invariant from 'shared/invariant'; import ReactCurrentDispatcher from './ReactCurrentDispatcher'; function resolveDispatcher() { const dispatcher = ReactCurrentDispatcher.current; // React版本不對或者Hook使用有誤什麼的就報錯 // ... return dispatcher; } export function useEffect(create,inputs) { const dispatcher = resolveDispatcher(); return dispatcher.useEffect(create, inputs); }
這裡可以看到,我們的useEffect實際上是ReactCurrentDispatcher.current.useEffect。
ReactCurrentDispatcher檔案(可以直接跳)
看一下ReactCurrentDispatcher檔案,這裡沒有簡化:
import type {Dispatcher} from 'react-reconciler/src/ReactFiberHooks';
const ReactCurrentDispatcher = {
current: (null: null | Dispatcher),
};
export default ReactCurrentDispatcher;
發現他的current的型別是null或者Dispatcher,所以這裡我們很簡單就能猜到,這個東西的原始碼在 'react-reconciler/src/ReactFiberHooks'。
ReactFiberHooks檔案
幾千行程式碼,頭大。但是莫慌,咱們又不是來寫react的,看看原理而已。
我們之前已經知道useState實際上是ReactCurrentDispatcher.current.useState。
很明顯ReactCurrentDispatcher.current不管是什麼東西單獨列出來,我們只需要知道誰賦值給他就行了。
精簡程式碼,去掉用__DEV__區分的開發程式碼之後,我們發現整個檔案給ReactCurrentDispatcher.current賦值的沒幾個。
而唯一一個與異常判斷無關的是renderWithHooks函式中的這一塊程式碼:
export function renderWithHooks(
current,
workInProgress,
Component,
props,
secondArg,
nextRenderExpirationTime
){
ReactCurrentDispatcher.current =
current === null || current.memoizedState === null
? HooksDispatcherOnMount
: HooksDispatcherOnUpdate;
let children = Component(props, secondArg);
return children;
}
我們不知道這段程式碼是幹嘛的,但是他肯定是渲染元件時用的。
而這裡很顯然ReactCurrentDispatcher.current的值就只能是HooksDispatcherOnMount和HooksDispatcherOnUpdate。
很明顯這兩個一個用於載入時,一個用於更新時。
然後我們們搜一下相關程式碼:
const HooksDispatcherOnMount = {
useEffect: mountEffect
};
const HooksDispatcherOnUpdate = {
useEffect: updateEffect
};
也就是說,元件載入時,useEffect會呼叫mountEffect,元件更新時會呼叫updateEffect。
讓我們繼續看看這兩個函式:
function mountEffect(create, deps) {
return mountEffectImpl(
UpdateEffect | PassiveEffect,
UnmountPassive | MountPassive,
create,
deps,
);
}
function updateEffect(create, deps) {
return updateEffectImpl(
UpdateEffect | PassiveEffect,
UnmountPassive | MountPassive,
create,
deps,
);
}
這裡的UpdateEffect和PassiveEffect是二進位制常數,用位運算的方式操作。
先不用知道具體意義,知道是個常量即可。
接下來我們看看具體的mountEffectImpl:
function mountEffectImpl(fiberEffectTag, hookEffectTag, create, deps){
const hook = mountWorkInProgressHook();
// useEffect不傳依賴,那麼就為null
const nextDeps = deps === undefined ? null : deps;
currentlyRenderingFiber.effectTag |= fiberEffectTag;
// 連結串列尾部hook物件的memoizedState為pushEffect的返回值
hook.memoizedState = pushEffect(hookEffectTag, create, undefined, nextDeps);
}
我們看到第一行程式碼呼叫mountWorkInProgressHook新建了一個hook物件,讓我們看看mountWorkInProgressHook:
function mountWorkInProgressHook() {
const hook = {
memoizedState: null,
baseState: null,
baseQueue: null,
queue: null,
next: null,
};
if (workInProgressHook === null) {
// This is the first hook in the list
currentlyRenderingFiber.memoizedState = workInProgressHook = hook;
} else {
// Append to the end of the list
workInProgressHook = workInProgressHook.next = hook;
}
return workInProgressHook;
}
很明顯這裡有個連結串列結構workInProgressHook,如果workInProgressHook連結串列為null就將新建的hook物件賦值給它,如果不為null,那麼就加在連結串列尾部。
這裡有必要講解一下:
Hooks作為一個連結串列儲存在fiber的memoizedState中。
currentHook 是當前fiber的連結串列。
workInProgressHook 是即將被加入到 work-in-progress fiber的連結串列。
然後我們再看看pushEffect:
function pushEffect(tag, create, destroy, deps) {
// 新建一個effect,很明顯又是個連結串列結構
const effect = {
tag,
create,
destroy,
deps,
// Circular
next: null,
};
// 從currentlyRenderingFiber.updateQueue獲取元件更新佇列
let componentUpdateQueue= currentlyRenderingFiber.updateQueue;
// 判斷元件更新佇列是否為空,每次在呼叫renderWithHooks都會將這個componentUpdateQueue置為null
// 這樣的話每次update這個元件時,就會建立一個新的effect連結串列
if (componentUpdateQueue === null) {
// 為空就建立一個元件更新佇列
componentUpdateQueue = createFunctionComponentUpdateQueue();
// 並賦值給currentlyRenderingFiber.updateQueue
currentlyRenderingFiber.updateQueue = componentUpdateQueue;
// 元件更新佇列最新的effect為我們新建的effect
componentUpdateQueue.lastEffect = effect.next = effect;
} else {
// 如果元件更新佇列已經存在,獲取它最新的Effect
const lastEffect = componentUpdateQueue.lastEffect;
if (lastEffect === null) {
// 如果最新的Effect為null,那麼元件更新佇列最新的Effect為我們新建的effect
componentUpdateQueue.lastEffect = effect.next = effect;
} else {
// 否則將我們的effect加入到連結串列結構中最末尾,然後他的next為連結串列結構的第一個effect
// 這裡的effect連結串列是個閉環
const firstEffect = lastEffect.next;
lastEffect.next = effect;
effect.next = firstEffect;
componentUpdateQueue.lastEffect = effect;
}
}
return effect;
}
我們再看看更新時呼叫的updateEffectImpl:
function updateEffectImpl(fiberEffectTag, hookEffectTag, create, deps) {
// 這裡 updateWorkInProgressHook
// workInProgressHook = workInProgressHook.next;
// currentHook = currentHook.next;
const hook = updateWorkInProgressHook();
const nextDeps = deps === undefined ? null : deps;
let destroy = undefined;
if (currentHook !== null) {
const prevEffect = currentHook.memoizedState;
destroy = prevEffect.destroy;
if (nextDeps !== null) {
const prevDeps = prevEffect.deps;
// 對比兩個依賴陣列的各個值之間是否有變動,如果沒變動,那麼就設定標誌位為NoHookEffect
if (areHookInputsEqual(nextDeps, prevDeps)) {
pushEffect(NoHookEffect, create, destroy, nextDeps);
return;
}
}
}
currentlyRenderingFiber.effectTag |= fiberEffectTag;
hook.memoizedState = pushEffect(hookEffectTag, create, destroy, nextDeps);
}
我們可以看到updateEffectImpl和mountEffectImpl很像,最重要的是我們得兩個函式串起來,看看他們到底實現了一個什麼。
Hook相關資料結構簡圖
這裡我自己畫了一張圖,利於理解:
這張圖的結構是一個元件某一時刻的結構。
圖中黃色為Fiber節點,綠色為Hook節點,藍色為Effect節點。
Fiber節點,其實就是我們的虛DOM節點,react會生成一個Fiber節點樹,每個元件在Fiber樹上都有對應的Fiber節點。
其中currentlyRenderingFiber表示我們正在進行渲染的節點,它來自於workInProgress,current表示已經渲染的節點。
元件載入時,會執行各個useEffect,然後就會建立一個Hook連結串列,而workInProgress的memoizedState欄位就指向了Hook連結串列的尾部Hook節點。
而構建每個Hook節點時,會同時構造一個Effect節點,同樣,Hook節點的memoizedState欄位就指向了對應的Effect節點。
而每個Effect節點又會連線起來形成一個連結串列,然後workInProgress的updateQueue欄位指向了Effect連結串列的尾部Effect節點。
元件更新時,會依次對比currentHook指向的Effect的依賴陣列與新的依賴陣列的不同,如果一樣,就設定Effect節點的effectTag為NoHookEffect。
但是無論依賴陣列中的值是否改變,都會新構造一個Effect節點,作為Hook節點的memoizedState欄位的值。
然後在準備渲染時,會去直接找到Fiber節點的updateQueue的lastEffect,也就是直接指向Effect連結串列的尾部Effect節點。
因為effect連結串列是閉環的,這裡通過lastEffect的next找到第一個Effect。
然後迴圈遍歷effect連結串列,當effectTag為NoHookEffect則不做操作,否則會去先執行effect的destroy操作,然後再執行create操作。
對,你沒看錯,總結起來就是每次更新後,只要依賴項改變,那麼就會執行useEffect的解除安裝函式,再執行第一個引數create函式。
這一部分程式碼比較遠:
function commitHookEffectList(
unmountTag,
mountTag,
finishedWork,
) {
const updateQueue = finishedWork.updateQueue;
let lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
if (lastEffect !== null) {
const firstEffect = lastEffect.next;
let effect = firstEffect;
do {
if ((effect.tag & unmountTag) !== NoHookEffect) {
// Unmount
const destroy = effect.destroy;
effect.destroy = undefined;
if (destroy !== undefined) {
destroy();
}
}
if ((effect.tag & mountTag) !== NoHookEffect) {
// Mount
const create = effect.create;
effect.destroy = create();
}
effect = effect.next;
} while (effect !== firstEffect);
}
}
這裡的位運算大家可能有點看不懂,因為NoHookEffect的值是0,所以只要effect.tag被設定為NoHookEffect,那麼
effect.tag & unmountTag
就必然為NoHookEffect。
我們還記得,我們之前的玩法,依賴陣列各個值不變時,就設定Effect節點的effectTag為NoHookEffect。
此時是絕對不會執行先destroy Effect節點,再執行Effect函式create的操作。
而如果effect.tag的值不為NoHookEffect,那也得需要effect.tag與unmountTag至少有一個位相同才能執行destroy。
讓我們看看之前無論是mountEffectImpl還是updateEffectImpl都預設傳的是:UnmountPassive | MountPassive,也就是說effect.tag為UnmountPassive | MountPassive。
而很明顯這個設計的目的在於,當mountTag為MountPassive時執行create函式,而unmountTag為UnmountPassive時建立執行destroy函式。
而只有下面這個地方會做這個Passive操作:
export function commitPassiveHookEffects(finishedWork: Fiber): void {
if ((finishedWork.effectTag & Passive) !== NoEffect) {
switch (finishedWork.tag) {
case FunctionComponent:
case ForwardRef:
case SimpleMemoComponent:
case Chunk: {
commitHookEffectList(UnmountPassive, NoHookEffect, finishedWork);
commitHookEffectList(NoHookEffect, MountPassive, finishedWork);
break;
}
default:
break;
}
}
}
這裡的意思很明顯,先遍歷一遍effect連結串列,每個依賴項變了的hook都destroy一下,然後再遍歷一遍effect連結串列,每個依賴項變了的,都執行create函式一下。
也就是說每次都會按照useEffect的呼叫順序,先執行所有useEffect的解除安裝函式,再執行所有useEffect的create函式。
而commitPassiveHookEffects又是隻有flushPassiveEffects這個函式最終能呼叫到。
而每次 React 在檢測到資料變化時,flushPassiveEffects就會執行。
不論是props還是state的變化都會如此。
所以如果您真的有需要去模擬一個像之前的componentDidMount和componentWillUnmount的生命週期,那麼最好用上一個單獨的Effect:
useEffect(()=>{
// 載入時的邏輯
return ()=>{
// 解除安裝時的邏輯
}
},[])
這裡用[]作為依賴陣列,是因為這樣依賴就不會變動,也就是隻在載入時執行一次載入邏輯,解除安裝時執行一次解除安裝邏輯。
不加依賴陣列時,那麼每次渲染都會執行一次載入和解除安裝。
總結
希望我的這篇文章讓您有一些收穫。
這裡主要想說一下自己在原始碼閱讀中的感想。
讀這部分的原始碼,其實更像是在盲人摸象。
為了追求效率,需要避開一些比較複雜的東西,比如我們提到的Fiber節點樹,又比如其實useEffect替換effect和具體執行effect並不是同步的。
否則解讀很多東西要花很多時間,怕是真的要寫一個系列了。
原始碼閱讀略顯艱澀,還好關鍵的地方都是有註釋的,在閱讀的過程中也能收穫不少東西。
我並不是react的開發者,如果在解讀的過程中有什麼疏漏和誤解,還望諸位批評指正