對標(biāo)蘋果的靈動島 華為帶來實況窗功能
繼蘋果的靈動島之后，華為也在今天正式推出了“實況窗”功能。據(jù)今天鴻蒙OS 4.0的現(xiàn)場演示顯示，華為的實況窗可以更高效的展現(xiàn)出實時通知，比如鎖屏上就能看到外賣、打車、銀行
在前面的一篇文章中，我們介紹了 Fiber 的詳細屬性所代表的含義。在函數(shù)式組件中，其中與 hook 相關(guān)的屬性為 memoizedState。
Fiber = { memoizedState: Hook}Fiber.memoizedState 是一個鏈表的起點，該鏈表的節(jié)點信息為。
export type Hook = { memoizedState: any, baseState: any, baseQueue: Update<any, any> | null, queue: any, next: Hook | null,}useState 調(diào)用分為兩個階段，一個是初始化階段，一個是更新階段。當(dāng)我們在 beginWork 中調(diào)用 renderWithHooks 時，通過判斷 Fiber.memozedState 是否有值來分辨當(dāng)前執(zhí)行屬于初始階段還是更新階段。
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 調(diào)用的是 mountState，在更新時，useState 調(diào)用的是 updateState
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];}理解這個源碼的關(guān)鍵在第一行代碼。
const hook = mountWorkInProgressHook();react 在 ReactFiberHooks.new.js 模塊全局中創(chuàng)建了如下三個變量。
let currentlyRenderingFiber: Fiber = (null: any);let currentHook: Hook | null = null;let workInProgressHook: Hook | null = null;currentlyRenderingFiber 表示當(dāng)前正在 render 中的 Fiber 節(jié)點。currentHook 表示當(dāng)前 Fiber 的鏈表。
workInProgressHook 表示當(dāng)前正在構(gòu)建中的新鏈表。
mountWorkInProgressHook 方法會創(chuàng)建當(dāng)前這個 mountState 執(zhí)行所產(chǎn)生的 hook 鏈表節(jié)點。
function mountWorkInProgressHook(): Hook { const hook: Hook = { memoizedState: null, baseState: null, baseQueue: null, queue: null, next: null, }; if (workInProgressHook === null) { // 作為第一個節(jié)點 currentlyRenderingFiber.memoizedState = workInProgressHook = hook; } else { // 添加到鏈表的下一個節(jié)點 workInProgressHook = workInProgressHook.next = hook; } // 返回當(dāng)前節(jié)點 return workInProgressHook;}hook 節(jié)點的 queue 表示一個新的鏈表結(jié)構(gòu)，用于存儲針對同一個 state 的多次 update 操作。，.pending 指向下一個 update 鏈表節(jié)點。此時因為是初始化操作，因此值為 null，此時我們會先創(chuàng)建一個 queue。
const queue: UpdateQueue<S, BasicStateAction<S>> = { pending: null, lanes: NoLanes, dispatch: null, lastRenderedReducer: basicStateReducer, lastRenderedState: (initialState: any),};hook.queue = queue;此時，dispatch 還沒有賦值。在接下來我們調(diào)用了 dispatchSetState，我們待會兒來詳細介紹這個方法，他會幫助 queue.pending 完善鏈表結(jié)構(gòu)或者進入調(diào)度階段，并返回了當(dāng)前 hook 需要的 dispatch 方法。
const dispatch: Dispatch< BasicStateAction<S>,> = (queue.dispatch = (dispatchSetState.bind( null, currentlyRenderingFiber, queue,): any));最后將初始化之后的緩存值和操作方法通過數(shù)組的方式返回。
return [hook.memoizedState, dispatch];更新時，將會調(diào)用 updateState 方法，他的代碼非常簡單，就是直接調(diào)用了一下 updateReducer。
function updateState<S>( initialState: (() => S) | S,): [S, Dispatch<BasicStateAction<S>>] { return updateReducer(basicStateReducer, (initialState: any));}這里的需要注意的是有一個模塊中的全局方法 basicStateReducer，該方法執(zhí)行會結(jié)合傳入的 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;}代碼中區(qū)分的情況是 useState 與 useReducer 的不同。useState 傳入的是值，而 useReducer 傳入的是函數(shù)
updateReducer 的代碼量稍微多了一些，不過他的主要邏輯是計算出最新的 state 值。
當(dāng)我們使用 setState 多次調(diào)用 dispatch 之后， 在 Hook 節(jié)點的 hook.queue 上會保存一個循環(huán)鏈表用于存儲上一次的每次調(diào)用傳入的 state 值，updateReducer 的主要邏輯就是遍歷該循環(huán)鏈表，并計算出最新值。
此時首先會將 queue.pending 的鏈表賦值給 hook.baseQueue，然后置空 queue.pending。
const pendingQueue = queue.pending;current.baseQueue = baseQueue = pendingQueue;queue.pending = null;然后通過 while 循環(huán)遍歷 hook.baseQueue 通過 reducer 計算出最新的 state 值。
// 簡化版代碼const first = baseQueue.next;if (first !== null) { let newState = current.baseState; let update = first; do { // 執(zhí)行每一次更新，去更新狀態(tài) 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];當(dāng)我們調(diào)用 setState 時，最終調(diào)用的是 dispatchSetState 方法。
setLoading -> dispatch -> dispatchSetState該方法有兩個邏輯，一個是同步調(diào)用，一個是并發(fā)模式下的異步調(diào)用。
同步調(diào)用時，主要的目的在于創(chuàng)建 hook.queue.pending 指向的環(huán)形鏈表。
首先我們要創(chuàng)建一個鏈表節(jié)點，該節(jié)點我們稱之為 update。
const lane = requestUpdateLane(fiber);const update: Update<S, A> = { lane, action, hasEagerState: false, eagerState: null, next: (null: any),};然后會判斷是否在 render 的時候調(diào)用了該方法。
if (isRenderPhaseUpdate(fiber)) { enqueueRenderPhaseUpdate(queue, update);} else {isRenderPhaseUpdate 用于判斷當(dāng)前是否是在 render 時調(diào)用，他的邏輯也非常簡單。
function isRenderPhaseUpdate(fiber: Fiber) { const alternate = fiber.alternate; return ( fiber === currentlyRenderingFiber || (alternate !== null && alternate === currentlyRenderingFiber) );}這里需要重點關(guān)注是 enqueueRenderPhaseUpdate 是如何創(chuàng)建環(huán)形鏈表的。他的代碼如下：
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;}我們用圖示來表達一下這個邏輯，光看代碼可能理解起來比較困難。
當(dāng)只有一個 update 節(jié)點時。
新增一個：
再新增一個：
在后續(xù)的邏輯中，會面臨的一種情況是當(dāng)渲染正在發(fā)生時，收到了來自并發(fā)事件的更新，我們需要等待直到當(dāng)前渲染結(jié)束或中斷再將其加入到 Fiber/Hook 隊列。因此React 需要一個數(shù)組來存儲這些更新，代碼邏輯如下：
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); }}在這個基礎(chǔ)之上，React 就有機會處理那些不會立即導(dǎo)致重新渲染的更新進入隊列。如果后續(xù)有更高優(yōu)先級的更新出現(xiàn)，將會重新對其進行排序。
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 的邏輯中，符合條件就會執(zhí)行該函數(shù)。
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;}很顯然，這就是并發(fā)更新的邏輯，代碼會最終調(diào)用 scheduleUpdateOnFiber，該方法是由 react-reconciler 提供，他后續(xù)會將任務(wù)帶入到 scheduler 中調(diào)度。
// 與 enqueueConcurrentHookUpdateAndEagerlyBailout 方法邏輯// 但會返回 root 節(jié)點const root = enqueueConcurrentHookUpdate(fiber, queue, update, lane);const eventTime = requestEventTime();scheduleUpdateOnFiber(root, fiber, lane, eventTime);entangleTransitionUpdate(root, queue, lane);這就是 useState 的實現(xiàn)原理。其中包含了大量的邏輯操作，可能跟我們在使用時所想的那樣有點不太一樣。這里大量借助了閉包和鏈表結(jié)構(gòu)來完成整個構(gòu)想。
這個邏輯里面也會有大量的探討存在于大廠面試的過程中。例如
本文鏈接：http://www.tebozhan.com/showinfo-26-84038-0.html燒腦預(yù)警，這波心智負擔(dān)有點重，深度探討 useState 的實現(xiàn)原理
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： C# 操作 Redis 的五種常見方法
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號