title: Hook 原理(状态Hook)

Hook 原理(状态 Hook)

首先回顾一下前文Hook 原理(概览), 其主要内容有:

  1. function类型的fiber节点, 它的处理函数是updateFunctionComponent, 其中再通过renderWithHooks调用function.
  2. 在function中, 通过Hook Api(如: useState, useEffect)创建Hook对象.
    • 状态Hook实现了状态持久化(等同于class组件维护fiber.memoizedState).
    • 副作用Hook则实现了维护fiber.flags,并提供副作用回调(类似于class组件的生命周期回调)
  3. 多个Hook对象构成一个链表结构, 并挂载到fiber.memoizedState之上.
  4. fiber树更新阶段, 把current.memoizedState链表上的所有Hook按照顺序克隆到workInProgress.memoizedState上, 实现数据的持久化.

在此基础之上, 本节将深入分析状态Hook的特性和实现原理.

创建 Hook

在fiber初次构造阶段, useState对应源码mountState, useReducer对应源码mountReducer

mountState:

  1. function mountState<S>(
  2.   initialState: (() => S) | S,
  3. ): [S, Dispatch<BasicStateAction<S>>] {
  4.   // 1. 创建hook
  5.   const hook = mountWorkInProgressHook();
  6.   if (typeof initialState === 'function') {
  7.     initialState = initialState();
  8.   }
  9.   // 2. 初始化hook的属性
  10.   // 2.1 设置 hook.memoizedState/hook.baseState
  11.   // 2.2 设置 hook.queue
  12.   hook.memoizedState = hook.baseState = initialState;
  13.   const queue = (hook.queue = {
  14.     pending: null,
  15.     dispatch: null,
  16.     // queue.lastRenderedReducer是内置函数
  17.     lastRenderedReducer: basicStateReducer,
  18.     lastRenderedState: (initialState: any),
  19.   });
  20.   // 2.3 设置 hook.dispatch
  21.   const dispatch: Dispatch<
  22.     BasicStateAction<S>,
  23.   > = (queue.dispatch = (dispatchAction.bind(
  24.     null,
  25.     currentlyRenderingFiber,
  26.     queue,
  27.   ): any));
  29.   // 3. 返回[当前状态, dispatch函数]
  30.   return [hook.memoizedState, dispatch];
  31. }

mountReducer:

  1. function mountReducer<S, I, A>(
  2.   reducer: (S, A) => S,
  3.   initialArg: I,
  4.   init?: I => S,
  5. ): [S, Dispatch<A>] {
  6.   // 1. 创建hook
  7.   const hook = mountWorkInProgressHook();
  8.   let initialState;
  9.   if (init !== undefined) {
  10.     initialState = init(initialArg);
  11.   } else {
  12.     initialState = ((initialArg: any): S);
  13.   }
  14.   // 2. 初始化hook的属性
  15.   // 2.1 设置 hook.memoizedState/hook.baseState
  16.   hook.memoizedState = hook.baseState = initialState;
  17.   // 2.2 设置 hook.queue
  18.   const queue = (hook.queue = {
  19.     pending: null,
  20.     dispatch: null,
  21.     // queue.lastRenderedReducer是由外传入
  22.     lastRenderedReducer: reducer,
  23.     lastRenderedState: (initialState: any),
  24.   });
  25.   // 2.3 设置 hook.dispatch
  26.   const dispatch: Dispatch<A> = (queue.dispatch = (dispatchAction.bind(
  27.     null,
  28.     currentlyRenderingFiber,
  29.     queue,
  30.   ): any));
  32.   // 3. 返回[当前状态, dispatch函数]
  33.   return [hook.memoizedState, dispatch];
  34. }

mountState和mountReducer逻辑简单: 主要负责创建hook, 初始化hook的属性, 最后返回[当前状态, dispatch函数].

唯一的不同点是hook.queue.lastRenderedReducer:

  • mountState使用的是内置的basicStateReducer
    1. function basicStateReducer<S>(state: S, action: BasicStateAction<S>): S {
    2.   return typeof action === 'function' ? action(state) : action;
    3. }
  • mountReducer使用的是外部传入自定义reducer

可见mountState是mountReducer的一种特殊情况, 即useState也是useReducer的一种特殊情况, 也是最简单的情况.

useState可以转换成useReducer:

  1. const [state, dispatch] = useState({ count: 0 });
  3. // 等价于
  4. const [state, dispatch] = useReducer(
  5.   function basicStateReducer(state, action) {
  6.     return typeof action === 'function' ? action(state) : action;
  7.   },
  8.   { count: 0 },
  9. );
  11. // 当需要更新state时, 有2种方式
  12. dispatch({ count: 1 }); // 1.直接设置
  13. dispatch(state => ({ count: state.count + 1 })); // 2.通过回调函数设置

userReducer的官网示例:

  1. const [state, dispatch] = useReducer(
  2.   function reducer(state, action) {
  3.     switch (action.type) {
  4.       case 'increment':
  5.         return { count: state.count + 1 };
  6.       case 'decrement':
  7.         return { count: state.count - 1 };
  8.       default:
  9.         throw new Error();
  10.     }
  11.   },
  12.   { count: 0 },
  13. );
  15. // 当需要更新state时, 只有1种方式
  16. dispatch({ type: 'decrement' });

可见, useState就是对useReducer的基本封装, 内置了一个特殊的reducer(后文不再区分useState, useReducer, 都以useState为例).创建hook之后返回值[hook.memoizedState, dispatch]中的dispatch实际上会调用reducer函数.

状态初始化

在useState(initialState)函数内部, 设置hook.memoizedState = hook.baseState = initialState;, 初始状态被同时保存到了hook.baseState,hook.memoizedState中.

  1. hook.memoizedState: 当前状态
  2. hook.baseState: 基础状态, 作为合并hook.baseQueue的初始值(下文介绍).

最后返回[hook.memoizedState, dispatch], 所以在function中使用的是hook.memoizedState.

状态更新

有如下代码:Edit hook-status

  1. import React, { useState } from 'react';
  2. export default function App() {
  3.   const [count, dispatch] = useState(0);
  4.   return (
  5.     <button
  6.       onClick={() => {
  7.         dispatch(1);
  8.         dispatch(3);
  9.         dispatch(2);
  10.       }}
  11.     >
  12.       {count}
  13.     </button>
  14.   );
  15. }

初次渲染时count = 0, 这时hook对象的内存状态如下:

Hook 原理(状态 Hook) - 图2

点击button, 通过dispatch函数进行更新, dispatch实际就是dispatchAction:

  1. function dispatchAction<S, A>(
  2.   fiber: Fiber,
  3.   queue: UpdateQueue<S, A>,
  4.   action: A,
  5. ) {
  6.   // 1. 创建update对象
  7.   const eventTime = requestEventTime();
  8.   const lane = requestUpdateLane(fiber); // Legacy模式返回SyncLane
  9.   const update: Update<S, A> = {
  10.     lane,
  11.     action,
  12.     eagerReducer: null,
  13.     eagerState: null,
  14.     next: (null: any),
  15.   };
  17.   // 2. 将update对象添加到hook.queue.pending队列
  18.   const pending = queue.pending;
  19.   if (pending === null) {
  20.     // 首个update, 创建一个环形链表
  21.     update.next = update;
  22.   } else {
  23.     update.next = pending.next;
  24.     pending.next = update;
  25.   }
  26.   queue.pending = update;
  28.   const alternate = fiber.alternate;
  29.   if (
  30.     fiber === currentlyRenderingFiber ||
  31.     (alternate !== null && alternate === currentlyRenderingFiber)
  32.   ) {
  33.     // 渲染时更新, 做好全局标记
  34.     didScheduleRenderPhaseUpdateDuringThisPass = didScheduleRenderPhaseUpdate = true;
  35.   } else {
  36.     // ...省略性能优化部分, 下文介绍
  38.     // 3. 发起调度更新, 进入`reconciler 运作流程`中的输入阶段.
  39.     scheduleUpdateOnFiber(fiber, lane, eventTime);
  40.   }
  41. }

逻辑十分清晰:

  1. 创建update对象, 其中update.lane代表优先级(可回顾fiber 树构造(基础准备)中的update优先级).
  2. 将update对象添加到hook.queue.pending环形链表.
    • 环形链表的特征: 为了方便添加新元素和快速拿到队首元素(都是O(1)), 所以pending指针指向了链表中最后一个元素.
    • 链表的使用方式可以参考React 算法之链表操作
  3. 发起调度更新: 调用scheduleUpdateOnFiber, 进入reconciler 运作流程中的输入阶段.

从调用scheduleUpdateOnFiber开始, 进入了react-reconciler包, 其中的所有逻辑可回顾reconciler 运作流程, 本节只讨论状态Hook相关逻辑.

注意: 本示例中虽然同时执行了 3 次 dispatch, 会请求 3 次调度, 由于调度中心的节流优化, 最后只会执行一次渲染

在fiber树构造(对比更新)过程中, 再次调用function, 这时useState对应的函数是updateState

  1. function updateState<S>(
  2.   initialState: (() => S) | S,
  3. ): [S, Dispatch<BasicStateAction<S>>] {
  4.   return updateReducer(basicStateReducer, (initialState: any));
  5. }

实际调用updateReducer.

在执行updateReducer之前, hook相关的内存结构如下:

Hook 原理(状态 Hook) - 图3

  1. function updateReducer<S, I, A>(
  2.   reducer: (S, A) => S,
  3.   initialArg: I,
  4.   init?: I => S,
  5. ): [S, Dispatch<A>] {
  6.   // 1. 获取workInProgressHook对象
  7.   const hook = updateWorkInProgressHook();
  8.   const queue = hook.queue;
  9.   queue.lastRenderedReducer = reducer;
  10.   const current: Hook = (currentHook: any);
  11.   let baseQueue = current.baseQueue;
  13.   // 2. 链表拼接: 将 hook.queue.pending 拼接到 current.baseQueue
  14.   const pendingQueue = queue.pending;
  15.   if (pendingQueue !== null) {
  16.     if (baseQueue !== null) {
  17.       const baseFirst = baseQueue.next;
  18.       const pendingFirst = pendingQueue.next;
  19.       baseQueue.next = pendingFirst;
  20.       pendingQueue.next = baseFirst;
  21.     }
  22.     current.baseQueue = baseQueue = pendingQueue;
  23.     queue.pending = null;
  24.   }
  25.   // 3. 状态计算
  26.   if (baseQueue !== null) {
  27.     const first = baseQueue.next;
  28.     let newState = current.baseState;
  30.     let newBaseState = null;
  31.     let newBaseQueueFirst = null;
  32.     let newBaseQueueLast = null;
  33.     let update = first;
  35.     do {
  36.       const updateLane = update.lane;
  37.       // 3.1 优先级提取update
  38.       if (!isSubsetOfLanes(renderLanes, updateLane)) {
  39.         // 优先级不够: 加入到baseQueue中, 等待下一次render
  40.         const clone: Update<S, A> = {
  41.           lane: updateLane,
  42.           action: update.action,
  43.           eagerReducer: update.eagerReducer,
  44.           eagerState: update.eagerState,
  45.           next: (null: any),
  46.         };
  47.         if (newBaseQueueLast === null) {
  48.           newBaseQueueFirst = newBaseQueueLast = clone;
  49.           newBaseState = newState;
  50.         } else {
  51.           newBaseQueueLast = newBaseQueueLast.next = clone;
  52.         }
  53.         currentlyRenderingFiber.lanes = mergeLanes(
  54.           currentlyRenderingFiber.lanes,
  55.           updateLane,
  56.         );
  57.         markSkippedUpdateLanes(updateLane);
  58.       } else {
  59.         // 优先级足够: 状态合并
  60.         if (newBaseQueueLast !== null) {
  61.           // 更新baseQueue
  62.           const clone: Update<S, A> = {
  63.             lane: NoLane,
  64.             action: update.action,
  65.             eagerReducer: update.eagerReducer,
  66.             eagerState: update.eagerState,
  67.             next: (null: any),
  68.           };
  69.           newBaseQueueLast = newBaseQueueLast.next = clone;
  70.         }
  71.         if (update.eagerReducer === reducer) {
  72.           // 性能优化: 如果存在 update.eagerReducer, 直接使用update.eagerState.避免重复调用reducer
  73.           newState = ((update.eagerState: any): S);
  74.         } else {
  75.           const action = update.action;
  76.           // 调用reducer获取最新状态
  77.           newState = reducer(newState, action);
  78.         }
  79.       }
  80.       update = update.next;
  81.     } while (update !== null && update !== first);
  83.     // 3.2. 更新属性
  84.     if (newBaseQueueLast === null) {
  85.       newBaseState = newState;
  86.     } else {
  87.       newBaseQueueLast.next = (newBaseQueueFirst: any);
  88.     }
  89.     if (!is(newState, hook.memoizedState)) {
  90.       markWorkInProgressReceivedUpdate();
  91.     }
  92.     // 把计算之后的结果更新到workInProgressHook上
  93.     hook.memoizedState = newState;
  94.     hook.baseState = newBaseState;
  95.     hook.baseQueue = newBaseQueueLast;
  96.     queue.lastRenderedState = newState;
  97.   }
  99.   const dispatch: Dispatch<A> = (queue.dispatch: any);
  100.   return [hook.memoizedState, dispatch];
  101. }

updateReducer函数, 代码相对较长, 但是逻辑分明:

  1. 调用updateWorkInProgressHook获取workInProgressHook对象

  2. 链表拼接: 将 hook.queue.pending 拼接到 current.baseQueue

    Hook 原理(状态 Hook) - 图4

  3. 状态计算

    1. update优先级不够: 加入到 baseQueue 中, 等待下一次 render
    2. update优先级足够: 状态合并

    3. 更新属性

      Hook 原理(状态 Hook) - 图5

性能优化

dispatchAction函数中, 在调用scheduleUpdateOnFiber之前, 针对update对象做了性能优化.

  1. queue.pending中只包含当前update时, 即当前update是queue.pending中的第一个update
  2. 直接调用queue.lastRenderedReducer,计算出update之后的 state, 记为eagerState
  3. 如果eagerState与currentState相同, 则直接退出, 不用发起调度更新.
  4. 已经被挂载到queue.pending上的update会在下一次render时再次合并.
  1. function dispatchAction<S, A>(
  2.   fiber: Fiber,
  3.   queue: UpdateQueue<S, A>,
  4.   action: A,
  5. ) {
  6.   // ...省略无关代码 ...只保留性能优化部分代码:
  8.   // 下面这个if判断, 能保证当前创建的update, 是`queue.pending`中第一个`update`. 为什么? 发起更新之后fiber.lanes会被改动(可以回顾`fiber 树构造(对比更新)`章节), 如果`fiber.lanes && alternate.lanes`没有被改动, 自然就是首个update
  9.   if (
  10.     fiber.lanes === NoLanes &&
  11.     (alternate === null || alternate.lanes === NoLanes)
  12.   ) {
  13.     const lastRenderedReducer = queue.lastRenderedReducer;
  14.     if (lastRenderedReducer !== null) {
  15.       let prevDispatcher;
  16.       const currentState: S = (queue.lastRenderedState: any);
  17.       const eagerState = lastRenderedReducer(currentState, action);
  18.       // 暂存`eagerReducer`和`eagerState`, 如果在render阶段reducer==update.eagerReducer, 则可以直接使用无需再次计算
  19.       update.eagerReducer = lastRenderedReducer;
  20.       update.eagerState = eagerState;
  21.       if (is(eagerState, currentState)) {
  22.         // 快速通道, eagerState与currentState相同, 无需调度更新
  23.         // 注: update已经被添加到了queue.pending, 并没有丢弃. 之后需要更新的时候, 此update还是会起作用
  24.         return;
  25.       }
  26.     }
  27.   }
  28.   // 发起调度更新, 进入`reconciler 运作流程`中的输入阶段.
  29.   scheduleUpdateOnFiber(fiber, lane, eventTime);
  30. }

为了验证上述优化, 可以查看这个 demo:Edit hook-throttle

异步更新

上述示例都是为在Legacy模式下, 所以均为同步更新. 所以update对象会被全量合并,hook.baseQueue和hook.baseState并没有起到实质作用.

虽然在v17.x版本中, 并没有Concurrent模式的入口, 即将发布的v18.x版本将全面进入异步时代, 所以本节提前梳理一下update异步合并的逻辑. 同时加深hook.baseQueue和hook.baseState的理解.

假设有一个queue.pending链表, 其中update优先级不同, 绿色表示高优先级, 灰色表示低优先级, 红色表示最高优先级.

在执行updateReducer之前, hook.memoizedState有如下结构(其中update3, update4是低优先级):

Hook 原理(状态 Hook) - 图7

链表拼接:

  • 和同步更新时一致, 直接把queue.pending拼接到current.baseQueue

Hook 原理(状态 Hook) - 图8

状态计算:

  • 只会提取update1, update2这 2 个高优先级的update, 所以最后memoizedState=2
  • 保留其余低优先级的update, 等待下一次render
  • 从第一个低优先级update3开始, 随后的所有update都会被添加到baseQueue, 由于update2已经是高优先级, 会设置update2.lane=NoLane将优先级升级到最高(红色表示).
  • 而baseState代表第一个低优先级update3之前的state, 在本例中, baseState=1

Hook 原理(状态 Hook) - 图9

function节点被处理完后, 高优先级的update, 会率先被使用(memoizedState=2). 一段时间后, 低优先级update3, update4符合渲染, 这种情况下再次执行updateReducer重复之前的步骤.

链表拼接:

  • 由于queue.pending = null, 故拼接前后没有实质变化

Hook 原理(状态 Hook) - 图10

状态计算:

  • 现在所有update.lane都符合渲染优先级, 所以最后的内存结构与同步更新一致(memoizedState=4,baseState=4).

Hook 原理(状态 Hook) - 图11

结论: 尽管update链表的优先级不同, 中间的render可能有多次, 但最终的更新结果等于update链表按顺序合并.

总结

本节深入分析状态Hook即useState的内部原理, 从同步,异步更新理解了update对象的合并方式, 最终结果存储在hook.memoizedState供给function使用.