當前位置：首頁 > 科技 > 軟件

燒腦預警，這波心智負擔有點重，深度探討 useState 的實現原理

來源：責編：時間：2024-04-19 09:29:41 157觀看

導讀在前面的一篇文章中，我們介紹了 Fiber 的詳細屬性所代表的含義。在函數式組件中，其中與 hook 相關的屬性為 memoizedState。Fiber = { memoizedState: Hook}Fiber.memoizedState 是一個鏈表的起點，該鏈表的節點信息為。

在前面的一篇文章中，我們介紹了 Fiber 的詳細屬性所代表的含義。在函數式組件中，其中與 hook 相關的屬性為 memoizedState。

Fiber = {  memoizedState: Hook}

Fiber.memoizedState 是一個鏈表的起點，該鏈表的節點信息為。

export type Hook = {  memoizedState: any,  baseState: any,  baseQueue: Update<any, any> | null,  queue: any,  next: Hook | null,}

useState 調用分為兩個階段，一個是初始化階段，一個是更新階段。當我們在 beginWork 中調用 renderWithHooks 時，通過判斷 Fiber.memozedState 是否有值來分辨當前執行屬于初始階段還是更新階段。

ReactCurrentDispatcher.current =  current === null || current.memoizedState === null    ? HooksDispatcherOnMount    : HooksDispatcherOnUpdate;

在 react 模塊中，我們可以看到 useState 的源碼非常簡單。

export function useState<S>(  initialState: (() => S) | S,): [S, Dispatch<BasicStateAction<S>>] {  const dispatcher = resolveDispatcher();  return dispatcher.useState(initialState);}

這里的 dispatcher，其實就是我們在 react-reconciler 中判斷好的 ReactCurrentDispatcher.currenthook 的初始化方法掛載在 HooksDispatcherOnMount 上。

const HooksDispatcherOnMount: Dispatcher = {  readContext,  useCallback: mountCallback,  useContext: readContext,  useEffect: mountEffect,  useImperativeHandle: mountImperativeHandle,  useLayoutEffect: mountLayoutEffect,  useInsertionEffect: mountInsertionEffect,  useMemo: mountMemo,  useReducer: mountReducer,  useRef: mountRef,  useState: mountState,  useDebugValue: mountDebugValue,  useDeferredValue: mountDeferredValue,  useTransition: mountTransition,  useMutableSource: mountMutableSource,  useSyncExternalStore: mountSyncExternalStore,  useId: mountId,  unstable_isNewReconciler: enableNewReconciler,};

hook 的更新方法掛載在 HooksDispatcherOnUpdate 上。

const HooksDispatcherOnUpdate: Dispatcher = {  readContext,  useCallback: updateCallback,  useContext: readContext,  useEffect: updateEffect,  useImperativeHandle: updateImperativeHandle,  useInsertionEffect: updateInsertionEffect,  useLayoutEffect: updateLayoutEffect,  useMemo: updateMemo,  useReducer: updateReducer,  useRef: updateRef,  useState: updateState,  useDebugValue: updateDebugValue,  useDeferredValue: updateDeferredValue,  useTransition: updateTransition,  useMutableSource: updateMutableSource,  useSyncExternalStore: updateSyncExternalStore,  useId: updateId,  unstable_isNewReconciler: enableNewReconciler,};

因此，在初始化時，useState 調用的是 mountState，在更新時，useState 調用的是 updateState

一、mountState

mountState 的源碼如下：

function mountState<S>(  initialState: (() => S) | S,): [S, Dispatch<BasicStateAction<S>>] {  const hook = mountWorkInProgressHook();  if (typeof initialState === 'function') {    initialState = initialState();  }  hook.memoizedState = hook.baseState = initialState;  const queue: UpdateQueue<S, BasicStateAction<S>> = {    pending: null,    lanes: NoLanes,    dispatch: null,    lastRenderedReducer: basicStateReducer,    lastRenderedState: (initialState: any),  };  hook.queue = queue;  const dispatch: Dispatch<    BasicStateAction<S>,  > = (queue.dispatch = (dispatchSetState.bind(    null,    currentlyRenderingFiber,    queue,  ): any));  return [hook.memoizedState, dispatch];}

理解這個源碼的關鍵在第一行代碼。

const hook = mountWorkInProgressHook();

react 在 ReactFiberHooks.new.js 模塊全局中創建了如下三個變量。

let currentlyRenderingFiber: Fiber = (null: any);let currentHook: Hook | null = null;let workInProgressHook: Hook | null = null;

currentlyRenderingFiber 表示當前正在 render 中的 Fiber 節點。currentHook 表示當前 Fiber 的鏈表。

workInProgressHook 表示當前正在構建中的新鏈表。

mountWorkInProgressHook 方法會創建當前這個 mountState 執行所產生的 hook 鏈表節點。

function mountWorkInProgressHook(): Hook {  const hook: Hook = {    memoizedState: null,    baseState: null,    baseQueue: null,    queue: null,    next: null,  };  if (workInProgressHook === null) {    // 作為第一個節點    currentlyRenderingFiber.memoizedState = workInProgressHook = hook;  } else {    // 添加到鏈表的下一個節點    workInProgressHook = workInProgressHook.next = hook;  }  // 返回當前節點  return workInProgressHook;}

hook 節點的 queue 表示一個新的鏈表結構，用于存儲針對同一個 state 的多次 update 操作。，.pending 指向下一個 update 鏈表節點。此時因為是初始化操作，因此值為 null，此時我們會先創建一個 queue。

const queue: UpdateQueue<S, BasicStateAction<S>> = {  pending: null,  lanes: NoLanes,  dispatch: null,  lastRenderedReducer: basicStateReducer,  lastRenderedState: (initialState: any),};hook.queue = queue;

此時，dispatch 還沒有賦值。在接下來我們調用了 dispatchSetState，我們待會兒來詳細介紹這個方法，他會幫助 queue.pending 完善鏈表結構或者進入調度階段，并返回了當前 hook 需要的 dispatch 方法。

const dispatch: Dispatch<  BasicStateAction<S>,> = (queue.dispatch = (dispatchSetState.bind(  null,  currentlyRenderingFiber,  queue,): any));

最后將初始化之后的緩存值和操作方法通過數組的方式返回。

return [hook.memoizedState, dispatch];

二、updateState

更新時，將會調用 updateState 方法，他的代碼非常簡單，就是直接調用了一下 updateReducer。

function updateState<S>(  initialState: (() => S) | S,): [S, Dispatch<BasicStateAction<S>>] {  return updateReducer(basicStateReducer, (initialState: any));}

這里的需要注意的是有一個模塊中的全局方法 basicStateReducer，該方法執行會結合傳入的 action 返回最新的 state 值。

function basicStateReducer<S>(state: S, action: BasicStateAction<S>): S {  // $FlowFixMe: Flow doesn't like mixed types  return typeof action === 'function' ? action(state) : action;}

代碼中區分的情況是 useState 與 useReducer 的不同。useState 傳入的是值，而 useReducer 傳入的是函數

三、updateReducer

updateReducer 的代碼量稍微多了一些，不過他的主要邏輯是計算出最新的 state 值。

當我們使用 setState 多次調用 dispatch 之后，在 Hook 節點的 hook.queue 上會保存一個循環鏈表用于存儲上一次的每次調用傳入的 state 值，updateReducer 的主要邏輯就是遍歷該循環鏈表，并計算出最新值。

此時首先會將 queue.pending 的鏈表賦值給 hook.baseQueue，然后置空 queue.pending。

const pendingQueue = queue.pending;current.baseQueue = baseQueue = pendingQueue;queue.pending = null;

然后通過 while 循環遍歷 hook.baseQueue 通過 reducer 計算出最新的 state 值。

// 簡化版代碼const first = baseQueue.next;if (first !== null) {  let newState = current.baseState;  let update = first;  do {    // 執行每一次更新，去更新狀態    const action = update.action;    newState = reducer(newState, action);    update = update.next;  } while (update !== null && update !== first);  hook.memoizedState = newState;}

最后再返回。

const dispatch: Dispatch<A> = (queue.dispatch: any);return [hook.memoizedState, dispatch];

四、dispatchSetState

當我們調用 setState 時，最終調用的是 dispatchSetState 方法。

setLoading -> dispatch -> dispatchSetState

該方法有兩個邏輯，一個是同步調用，一個是并發模式下的異步調用。

同步調用時，主要的目的在于創建 hook.queue.pending 指向的環形鏈表。

首先我們要創建一個鏈表節點，該節點我們稱之為 update。

const lane = requestUpdateLane(fiber);const update: Update<S, A> = {  lane,  action,  hasEagerState: false,  eagerState: null,  next: (null: any),};

然后會判斷是否在 render 的時候調用了該方法。

if (isRenderPhaseUpdate(fiber)) {  enqueueRenderPhaseUpdate(queue, update);} else {

isRenderPhaseUpdate 用于判斷當前是否是在 render 時調用，他的邏輯也非常簡單。

function isRenderPhaseUpdate(fiber: Fiber) {  const alternate = fiber.alternate;  return (    fiber === currentlyRenderingFiber ||    (alternate !== null && alternate === currentlyRenderingFiber)  );}

這里需要重點關注是 enqueueRenderPhaseUpdate 是如何創建環形鏈表的。他的代碼如下：

function enqueueRenderPhaseUpdate<S, A>(  queue: UpdateQueue<S, A>,  update: Update<S, A>,) {  didScheduleRenderPhaseUpdateDuringThisPass = didScheduleRenderPhaseUpdate = true;  const pending = queue.pending;  if (pending === null) {    update.next = update;  } else {    update.next = pending.next;    pending.next = update;  }  queue.pending = update;}

我們用圖示來表達一下這個邏輯，光看代碼可能理解起來比較困難。

當只有一個 update 節點時。

新增一個：

再新增一個：

在后續的邏輯中，會面臨的一種情況是當渲染正在發生時，收到了來自并發事件的更新，我們需要等待直到當前渲染結束或中斷再將其加入到 Fiber/Hook 隊列。因此React 需要一個數組來存儲這些更新，代碼邏輯如下：

const concurrentQueues: Array<any> = [];let concurrentQueuesIndex = 0;

function enqueueUpdate(  fiber: Fiber,  queue: ConcurrentQueue | null,  update: ConcurrentUpdate | null,  lane: Lane,) {  concurrentQueues[concurrentQueuesIndex++] = fiber;  concurrentQueues[concurrentQueuesIndex++] = queue;  concurrentQueues[concurrentQueuesIndex++] = update;  concurrentQueues[concurrentQueuesIndex++] = lane;  concurrentlyUpdatedLanes = mergeLanes(concurrentlyUpdatedLanes, lane);  fiber.lanes = mergeLanes(fiber.lanes, lane);  const alternate = fiber.alternate;  if (alternate !== null) {    alternate.lanes = mergeLanes(alternate.lanes, lane);  }}

在這個基礎之上，React 就有機會處理那些不會立即導致重新渲染的更新進入隊列。如果后續有更高優先級的更新出現，將會重新對其進行排序。

export function enqueueConcurrentHookUpdateAndEagerlyBailout<S, A>(  fiber: Fiber,  queue: HookQueue<S, A>,  update: HookUpdate<S, A>,): void {  // This function is used to queue an update that doesn't need a rerender. The  // only reason we queue it is in case there's a subsequent higher priority  // update that causes it to be rebased.  const lane = NoLane;  const concurrentQueue: ConcurrentQueue = (queue: any);  const concurrentUpdate: ConcurrentUpdate = (update: any);  enqueueUpdate(fiber, concurrentQueue, concurrentUpdate, lane);}

dispatchSetState 的邏輯中，符合條件就會執行該函數。

if (is(eagerState, currentState)) {  // Fast path. We can bail out without scheduling React to re-render.  // It's still possible that we'll need to rebase this update later,  // if the component re-renders for a different reason and by that  // time the reducer has changed.  // TODO: Do we still need to entangle transitions in this case?  enqueueConcurrentHookUpdateAndEagerlyBailout(fiber, queue, update);  return;}

很顯然，這就是并發更新的邏輯，代碼會最終調用 scheduleUpdateOnFiber，該方法是由 react-reconciler 提供，他后續會將任務帶入到 scheduler 中調度。

// 與 enqueueConcurrentHookUpdateAndEagerlyBailout 方法邏輯// 但會返回 root 節點const root = enqueueConcurrentHookUpdate(fiber, queue, update, lane);const eventTime = requestEventTime();scheduleUpdateOnFiber(root, fiber, lane, eventTime);entangleTransitionUpdate(root, queue, lane);

五、總結與思考

這就是 useState 的實現原理。其中包含了大量的邏輯操作，可能跟我們在使用時所想的那樣有點不太一樣。這里大量借助了閉包和鏈表結構來完成整個構想。

這個邏輯里面也會有大量的探討存在于大廠面試的過程中。例如

為什么不能把 hook 的寫法放到 if 判斷中去。
setState 的合并操作是如何做到的。
hook 鏈表和 queue.pending 的環狀鏈表都應該如何理解？
setState 之后，為什么無法直接拿到最新值，徹底消化了之后這些問題都能很好的得到解答。

本文鏈接：http://www.tebozhan.com/showinfo-26-84038-0.html燒腦預警，這波心智負擔有點重，深度探討 useState 的實現原理

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： C# 操作 Redis 的五種常見方法

下一篇：前端實現空閑時注銷登錄，so easy！

標簽：

熱門焦點

盧偉冰長文解析K60至尊版對Redmi有著里程碑式的意義

在今天的Redmi后性能時代戰略發布會結束之后，Redmi總經理盧偉冰又帶來了一篇長文，詳解了為什么 Redmi 要開啟后性能時代？為什么選擇和 MediaTek、Pixelworks 深度合作？以及后性
0糖0卡0脂旭日森林仙草烏龍茶優惠：15瓶到手29元

旭日森林無糖仙草烏龍茶510ml*15瓶平時要賣為79.9元，今日下單領取50元優惠券，到手價為29.9元。產品規格：0糖0卡0脂，添加草本仙草汁，清涼爽口，富含茶多酚，保留
使用Webdriver-manager解決瀏覽器與驅動不匹配所帶來自動化無法執行的問題

1、前言在我們使用 Selenium 進行 UI 自動化測試時，常常會因為瀏覽器驅動與瀏覽器版本不匹配，而導致自動化測試無法執行，需要手動去下載對應的驅動版本，并替換原有的驅動，可能還
為什么你不應該使用Div作為可點擊元素

按鈕是為任何網絡應用程序提供交互性的最常見方式。但我們經常傾向于使用其他HTML元素，如 div span 等作為 clickable 元素。但通過這樣做，我們錯過了許多內置瀏覽器的功能。
東方甄選單飛：有些鳥注定是關不住的

作者：彭寬鴻來源：華爾街科技眼&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;東方甄選創始人俞敏洪帶隊的“7天甘肅行”直播活動已在近日順利收官。成立后一
華為Mate60系列模具曝光：采用碩大圓形后置相機模組+拼接配色方案

據此前多方爆料，今年華為將開始恢復一年雙旗艦戰略，除上半年推出的P60系列外，往年下半年的Mate系列也將迎來更新，有望在9-10月份帶來全新的華為Mate60
AMD的AI芯片轉單給三星可能性不大與臺積電已合作至2nm制程

據 DIGITIMES 消息，英偉達 AI GPU 出貨逐季飆升，接下來 AMD MI 300 系列將在第 4 季底量產。而半導體業內人士表示，近日傳出 AMD 的 AI 芯片將轉單給
iQOO Neo8系列今日官宣：首發天璣9200+ 全球安卓最強芯！

在昨日舉行的的聯發科新一代旗艦芯片天璣9200+的發布會上，iQOO官方也正式宣布，全新的iQOO Neo8系列新品將全球首發搭載這款當前性能最強大的移動平臺
OPPO K11搭載高性能石墨散熱系統：旗艦同款性能涼爽釋放

日前OPPO官方宣布，將于7月25日14:30舉辦新品發布會，屆時全新的OPPO K11將正式與大家見面，將主打旗艦影像，和同檔位競品相比，其最大的賣點就是將配備索尼

AVt天堂网手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

燒腦預警，這波心智負擔有點重，深度探討 useState 的實現原理

一、mountState

二、updateState

三、updateReducer

四、dispatchSetState

五、總結與思考

盧偉冰長文解析K60至尊版對Redmi有著里程碑式的意義

0糖0卡0脂旭日森林仙草烏龍茶優惠：15瓶到手29元

使用Webdriver-manager解決瀏覽器與驅動不匹配所帶來自動化無法執行的問題

為什么你不應該使用Div作為可點擊元素

東方甄選單飛：有些鳥注定是關不住的

華為Mate60系列模具曝光：采用碩大圓形后置相機模組+拼接配色方案

AMD的AI芯片轉單給三星可能性不大與臺積電已合作至2nm制程

iQOO Neo8系列今日官宣：首發天璣9200+ 全球安卓最強芯！

OPPO K11搭載高性能石墨散熱系統：旗艦同款性能涼爽釋放

最新推薦

猜你喜歡

熱門推薦

相關資訊