Skip to main content

3 posts tagged with "Hook"

View All Tags

· 4 min read

写在前面​

  • 技术赋能业务，业务促进技术
  • 不要提前设计，不要为了用技术而用技术

拥有自己的应用模板​

  • 沉淀自己的应用模板很重要，这是属于你的最佳实践
    • 快速新建项目
    • 代码规范配置
    • 预设高质量依赖
    • 良好的构建配置和插件集合
  • 尝试给自己写个脚手架，和模板配合

ts + eslint​

  • 最大限度确保代码的质量，不过也不能滥用 any
  • 封装公共 type，比如 TPlainObject、ISOTimeStamp、颜色枚举等
  • eslint 只做代码检查，不做代码格式化

prettier​

  • 代码格式化一致性，再也不怕帮同事改代码了
  • commitlint 代码提交前强制格式化
  • .vscode 增加 formatOnSave

key​

请给遍历组件加上 key，提高组件的复用率，避免错位(index 做 key)导致的更新异常现象

正确用 Hook​

  • 统一使用 Hook 编写组件
  • 只能在最顶层使用，不要在循环、条件语句或函数中使用
  • 变量和对应的函数(func/effect)放一起，而不是给所有变量和所函数划分界限
  • 适当使用 useState，部分情况可以用 useRef 替代

最小原则​

  • 最小渲染次数。这个是架构层面出发的必须注重的优化，react 应用的性能优化基本都会从这里开始。通过 useMemo 或者 shouldUpdateComponent/memo 来避免组件的重复渲染
  • 擅用缓存。可以借助 useCallback 或 useRef 缓存变量和函数，避免重复创建
  • 最少依赖项。使用新的依赖之前，先思考必要性。比如 Redux，如果只是小项目，通信也不复杂，那直接用 Context 有何不可

组件化​

遵守单一职责原则，确保组件简洁、耦合度小、功能明确

能否做好组件化是鉴别前端工程师能力的一个重要方式

卸载​

别忘了卸载定时器、移除事件，不要浪费内存

错误边界​

给组件都统一添加错误边界(Error Boundary)来防止白屏。让 PM、测试看到白屏和局部错误是俩回事

单元测试​

公共组件和工具函数/自定义 Hook，有时间的话写点单元测试，受益匪浅哦。覆盖率尽可能大于 70%，单元测试工具推荐 Jest

应用优化​

  • 加快首屏
    • 组件/路由/资源懒加载
    • 本地/离线缓存
  • 减小包体积
    • 代码分割
    • 按需加载
    • tree shaking

总结​

有讲的不对、需要改进的地方，欢迎评论，一块进步 ~

· 14 min read

在 React 中，数据获取、设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。在 React 16.8 新增了 Hook，这些副作用都可以通过 useEffect 或者 useLayoutEffect 来调用。前阵子抽空学了下 useState 的源码和做了总结，今天也稍微总结了下 use(Layout)Effect。

写在前面​

不熟悉 Fiber 架构的话可以参考 https://blog.zhouweibin.top/detail/60aa954b6da89c0011cca404

对 useState 原理感兴趣的可以参考我之前写的博客 https://blog.zhouweibin.top/detail/60a16c423ba50e0011ffbc3b

涉及到上面知识的本文可能不会赘述，下面主要重点谈谈 use(Layout)Effect 这两个 Hooks 在 React 挂载和更新过程中做的事情

effectList​

这是一个副作用链表，会连接具有副作用 effect 的 fiber 节点，副作用的数据格式如下

{
  create: Function, // 传入use（Layout）Effect函数的第一个参数，即回调函数
  destroy: Function, // 回调函数return的函数，在组件销毁的时候执行
  deps: any[], // 依赖项
  next: Effect, // 指向下一个effect
  tag: string, // effect的类型，区分是useEffect还是useLayoutEffect
}

副作用在函数组件中体现为 use(Layout)Effect 的回调和销毁函数（即回调的返回值）（统称为副作用）

收集​

从单个 fiber 节点看，fiber.memorizedState 挂载着 Hooks 链表，Hooks 链表会按顺序连接该节点上的 Hook，其中 use(Layout)Effect 上的 memorizedState 会存放副作用，待执行的副作用会串联成一个循环链表存储在updateQueue上，如下图所示：

从整个 Fiber Tree 来看，render 阶段会自下而上创建 effectList，主要是通过completeUnitOfWork这个方法创建，只有依赖项有变化才会将当前的 fiber 节点追加到 effectList。如下图所示：

最终的 effectList 如下所示：

首次挂载组件(mount)，执行 useEffect 时，会调用mountEffectImpl，简化后的源码如下：

function mountEffectImpl(fiberFlags, hookFlags, create, deps) {
  const hook = mountWorkInProgressHook(); // 创建hook对象
  const nextDeps = deps === undefined ? null : deps; // 依赖

  // NOTE 给 fiber 节点打上副作用的 effectTag
  currentlyRenderingFiber.flags = fiberFlags;

  // 创建 effect 对象，挂载到 hook 的 memoizedState 上
  hook.memoizedState = pushEffect(
    HookHasEffect | hookFlags,
    create,
    undefined,
    nextDeps
  );
}

更新时(update)，会调用 updateEffectImpl

function updateEffectImpl(fiberFlags, hookFlags, create, deps): void {
  const hook = updateWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  let destroy = undefined;

  if (currentHook !== null) {
    const prevEffect = currentHook.memoizedState;
    // 获取上一次 effect 的 destroy 函数
    destroy = prevEffect.destroy;
    if (nextDeps !== null) {
      const prevDeps = prevEffect.deps;
      // NOTE 如果前后依赖相同
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        pushEffect(hookFlags, create, destroy, nextDeps);
        return;
      }
    }
  }

  // NOTE flags的作用
  currentlyRenderingFiber.flags |= fiberFlags;
  // 如果前后依赖有变，在 effect 的 tag 中加入 HookHasEffect
  // 并将新的 effect 挂载到 hook.memoizedState 上
  hook.memoizedState = pushEffect(
    HookHasEffect | hookFlags,
    create,
    destroy,
    nextDeps
  );
}

组件 mount 和 update 时收集 effect 的区别在于，前者无须调用前一次的销毁函数，后者在创建 effect 前会判断依赖项，主要依赖项变化才会创建 effect 并挂载到 hook 上

不管组件处于什么状态，都会调用到pushEffect这个函数它的作用其实就是创建 effect 对象，将 effect 对象追加到 fiber 的 updateQueue 上

function pushEffect(tag, create, destroy, deps) {
  const effect: Effect = {
    tag,
    create,
    destroy,
    deps,
    next,
  };

  // NOTE 从 workInProgress 上取到 updateQueue（和 effectList 的区别）
  let componentUpdateQueue = currentlyRenderingFiber.updateQueue;
  if (componentUpdateQueue === null) {
    // 如果 updateQueue 为空，把 effect 放到链表中，和它自己形成闭环
    componentUpdateQueue = createFunctionComponentUpdateQueue();
    currentlyRenderingFiber.updateQueue = componentUpdateQueue;
    componentUpdateQueue.lastEffect = effect.next = effect;
  } else {
    // updateQueue 不为空，将 effect 追加到链表上
    const lastEffect = componentUpdateQueue.lastEffect;
    if (lastEffect === null) {
      componentUpdateQueue.lastEffect = effect.next = effect;
    } else {
      const firstEffect = lastEffect.next;
      lastEffect.next = effect;
      effect.next = firstEffect;
      componentUpdateQueue.lastEffect = effect;
    }
  }
  return effect;
}

在执行完 fiber 节点时，如果有更新 effect，会将该 fiber 节点追加到父节点的 effectList

function completeUnitOfWork(unitOfWork: Fiber): void {
  let completedWork = unitOfWork;
  do {
    const current = completedWork.alternate;
    const returnFiber = completedWork.return;

    let next = completeWork(current, completedWork, subtreeRenderLanes);

    // effect list构建
    if (returnFiber !== null && (returnFiber.flags & Incomplete) === NoFlags) {
      // 层层拷贝
      if (returnFiber.firstEffect === null) {
        returnFiber.firstEffect = completedWork.firstEffect;
      }
      if (completedWork.lastEffect !== null) {
        // 说明当前节点是兄弟节点，子节点有effect，已经给returnFiber.lastEffect赋值过了
        if (returnFiber.lastEffect !== null) {
          // 连接兄弟节点的effect
          returnFiber.lastEffect.nextEffect = completedWork.firstEffect;
        }
        returnFiber.lastEffect = completedWork.lastEffect;
      }

      const flags = completedWork.flags;

      // NOTE: 该 fiber 节点有 effect
      if (flags > PerformedWork) {
        // 当前节点有effect连接上effect list
        if (returnFiber.lastEffect !== null) {
          returnFiber.lastEffect.nextEffect = completedWork;
        } else {
          // returnFiber没有firstEffect的情况是第一次遇见有effect的节点
          returnFiber.firstEffect = completedWork;
        }
        returnFiber.lastEffect = completedWork;
      }
    }

    // 兄弟元素遍历再到返返回父级
    const siblingFiber = completedWork.sibling;
    if (siblingFiber !== null) {
      workInProgress = siblingFiber;
      return;
    }
    completedWork = returnFiber;
    workInProgress = completedWork;
  } while (completedWork !== null);
}

执行​

render 阶段 useEffect 和 useLayoutEffect 没什么区别，在 commit 阶段会有比较明显的区别。先看下 useEffect，主要有三个地方会执行

useEffect​

  1. 刚进入 commit 阶段
function commitRootImpl(root, renderPriorityLevel) {
  // 进入commit阶段，先执行一次之前未执行的 useEffect
  do {
    flushPassiveEffects();
  } while (rootWithPendingPassiveEffects !== null);
  // ...
  do {
    try {
      // beforeMutation阶段的处理函数：commitBeforeMutationEffects内部，
      // 异步调度 useEffect
      commitBeforeMutationEffects();
    } catch (error) {
      ...
    }
  } while (nextEffect !== null);
  // ...
  const rootDidHavePassiveEffects = rootDoesHavePassiveEffects;

  if (rootDoesHavePassiveEffects) {
    // NOTE 记录有副作用的 effect
    rootWithPendingPassiveEffects = root;
  }
}
  1. beforeMutation，该阶段会异步调度 useEffect
function commitBeforeMutationEffects() {
  while (nextEffect !== null) {
    // ...
    if ((flags & Passive) !== NoFlags) {
      // 如果fiber节点上的flags存在Passive调度useEffect
      if (!rootDoesHavePassiveEffects) {
        // 锁住调度状态，防止多次调度
        rootDoesHavePassiveEffects = true;
        // NOTE NormalSchedulerPriority 一般优先级
        scheduleCallback(NormalSchedulerPriority, () => {
          flushPassiveEffects();
          return null;
        });
      }
    }
    nextEffect = nextEffect.nextEffect;
  }
}
  1. layout 阶段填充 effect 执行数组，真正执行 useEffect 的时候，实际上是先执行上一次 effect 的销毁函数，再执行本次 effect 的创建函数
function commitLifeCycles(
  finishedRoot: FiberRoot,
  current: Fiber | null,
  finishedWork: Fiber,
  committedLanes: Lanes,
): void {
  switch (finishedWork.tag) {
    case FunctionComponent:
    case ForwardRef:
    case SimpleMemoComponent:
    case Block: {
      // ...
      // layout阶段填充effect执行数组
      schedulePassiveEffects(finishedWork);
      return;
    }
}

在调用 schedulePassiveEffects 填充 effect 执行数组时，有一个重要的地方就是只在包含 HasEffect 的 effectTag 的时候，才将 effect 放到数组内，这一点保证了依赖项有变化再去处理 effect。也就是：如果前后依赖未变，则 effect 的 tag 就赋值为传入的 hookFlags，否则，在 tag 中加入 HookHasEffect 标志位。正是因为这样，在处理 effect 链表时才可以只处理依赖变化的 effect，use(Layout)Effect 才可以根据它的依赖变化情况来决定是否执行回调。

function schedulePassiveEffects(finishedWork: Fiber) {
  // 获取到函数组件的 updateQueue
  const updateQueue = finishedWork.updateQueue;
  // 获取 effect 链表
  const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
  if (lastEffect !== null) {
    const firstEffect = lastEffect.next;
    let effect = firstEffect;
    // 循环 effect 链表
    do {
      const { next, tag } = effect;
      if (
        (tag & HookPassive) !== NoHookEffect &&
        (tag & HookHasEffect) !== NoHookEffect
      ) {
        // 当 effect 的 tag 含有 HookPassive 和 HookHasEffect 时
        // 分别插入销毁函数数组和创建函数数组
        enqueuePendingPassiveHookEffectUnmount(finishedWork, effect);
        enqueuePendingPassiveHookEffectMount(finishedWork, effect);
      }
      effect = next;
    } while (effect !== firstEffect);
  }
}

上边已经填充好 effect 执行数组了，接下来就是执行这个数组。执行过程是先循环待销毁的 effect 数组，再循环待创建的 effect 数组，这一过程发生在flushPassiveEffectsImpl函数中

function flushPassiveEffectsImpl() {
  // 先校验，如果root上没有 Passive effectTag 的节点，则直接return
  if (rootWithPendingPassiveEffects === null) {
    return false;
  }
  // ...
  // 执行effect的销毁
  const unmountEffects = pendingPassiveHookEffectsUnmount;
  pendingPassiveHookEffectsUnmount = [];
  for (let i = 0; i < unmountEffects.length; i += 2) {
    const effect = ((unmountEffects[i]: any): HookEffect);
    const fiber = ((unmountEffects[i + 1]: any): Fiber);
    const destroy = effect.destroy;
    effect.destroy = undefined;

    if (typeof destroy === "function") {
      try {
        destroy();
      } catch (error) {
        captureCommitPhaseError(fiber, error);
      }
    }
  }

  // 再执行effect的创建
  const mountEffects = pendingPassiveHookEffectsMount;
  pendingPassiveHookEffectsMount = [];
  for (let i = 0; i < mountEffects.length; i += 2) {
    const effect = ((mountEffects[i]: any): HookEffect);
    const fiber = ((mountEffects[i + 1]: any): Fiber);
    try {
      const create = effect.create;
      effect.destroy = create();
    } catch (error) {
      captureCommitPhaseError(fiber, error);
    }
  }
  // ...
  return true;
}

useLayoutEffect​

useLayoutEffect 在执行的时候，也是先执行上一次的销毁函数再执行创建函数。和 useEffect 不同的是这两者都是同步执行的，前者在 mutation 阶段执行，后者在 layout 阶段执行。

与 useEffect 不同的是，它不用数组去存储销毁函数和创建函数，而是直接操作当前 fiber 上的 updateQueue

  1. 卸载上一次的 effect，发生在 mutation 阶段
// 调用卸载layout effect的函数，传入layout有关的effectTag和说明effect有变化的effectTag：HookLayout | HookHasEffect
commitHookEffectListUnmount(HookLayout | HookHasEffect, finishedWork);

function commitHookEffectListUnmount(tag: number, finishedWork: Fiber) {
  const updateQueue = finishedWork.updateQueue;
  const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;

  // 循环updateQueue上的effect链表
  if (lastEffect !== null) {
    const firstEffect = lastEffect.next;
    let effect = firstEffect;
    do {
      if ((effect.tag & tag) === tag) {
        const destroy = effect.destroy;
        effect.destroy = undefined;
        if (destroy !== undefined) {
          destroy();
        }
      }
      effect = effect.next;
    } while (effect !== firstEffect);
  }
}
  1. 执行本次的 effect 创建，发生在 layout 阶段
// 调用创建layout effect的函数
commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);

function commitHookEffectListMount(tag: number, finishedWork: Fiber) {
  const updateQueue = finishedWork.updateQueue;
  const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
  if (lastEffect !== null) {
    const firstEffect = lastEffect.next;
    let effect = firstEffect;
    do {
      if ((effect.tag & tag) === tag) {
        // 创建
        const create = effect.create;
        effect.destroy = create();
      }
      effect = effect.next;
    } while (effect !== firstEffect);
  }
}

一些问题​

  • useEffect 和 useLayoutEffect 的使用和区别

useEffect在实现上利用 scheduler(关于 scheduler 后续会写篇文章介绍) 的异步调度函数：scheduleCallback，这函数会将执行 useEffect 的动作作为一个任务去调度，这个任务会异步调用，发生在 DOM 渲染之后

而useLayoutEffect发生在 DOM 渲染之前，执行时机和componentDidMount、componentDidUpdate是一致的，也就是说如果在useEffect中触发状态更新或者 DOM 渲染，会额外追加一次 DOM 渲染

一般情况下建议使用 useEffect，因为它 不会阻塞渲染，useLayoutEffect 会阻塞渲染，只有在涉及到修改 DOM、动画等场景下考虑使用 useLayoutEffect

  • 不同 useEffect 回调触发了多次 setState，会触发多次 render 吗？

不会。setState 最后其实都会调用 scheduleUpdateOnFiber

// scheduleUpdateOnFiber
// ...
if (executionContext === NoContext) {
  // Flush the synchronous work now, unless we're already working or inside
  // a batch. This is intentionally inside scheduleUpdateOnFiber instead of
  // scheduleCallbackForFiber to preserve the ability to schedule a callback
  // without immediately flushing it. We only do this for user-initiated
  // updates, to preserve historical behavior of legacy mode.
  flushSyncCallbackQueue();
}
// ...

只有当 executionContext 为 NoContext 才会触发同步更新，其余情况都是批量更新。在 commit 的 beforeMutation 阶段，会赋值 executionContext 为 CommitContext，代表进入 commit 阶段

// beforeMutation
// 将当前上下文标记为CommitContext，作为commit阶段的标志
// ...
const prevExecutionContext = executionContext;
executionContext |= CommitContext;
// ...

· 13 min read

得闲翻下 react17 的源码和相关文章，学习一下 react 的 useState 的实现原理。整个过程蛮有趣的，首先得理解 fiber 架构，其次在 debugger 源码的时候得学习和理解一些必要的上下文，整体来说受益匪浅

前置知识​

闭包​

在 hooks 的应用比如 dispatch 函数，也就是 useState 返回的第二个参数

闭包是指有权访问另一个函数作用域中变量或方法的函数，创建闭包的方式就是在一个函数内创建闭包函数，通过闭包函数访问这个函数的局部变量, 利用闭包可以突破作用链域的特性，将函数内部的变量和方法传递到外部。

单链表​

A-->B-->C。fiber 架构通过使用这种数据结构，实现了 render 过程的可中断性。比如更新了 B 节点，突然有高优先级插入，这个时候只需要记住当前更新到的节点是 B 即可，然后去执行高优任务，之后再从 B 节点继续更新

fiber & hook​

fiber 对象和 hook 对象的关系如下图： fiber & hook

fiber 架构​

React 16 引入了 fiber 架构，会基于 ReactElement 生成唯一的 fiber 对象。在更新阶段，会基于旧的 fiber 链表创建一个新的 fiber 链表(如下图)，可以复用旧的对象，并且获取旧 hooks 的状态

fiber双链表

两个单链表​

hooks 链表​

/*
Hooks are stored as a linked list on the fiber's memoizedState field.  
hooks 以链表的形式存储在fiber节点的memoizedState属性上
The current hook list is the list that belongs to the current fiber.
当前的hook链表就是当前正在遍历的fiber节点上的
The work-in-progress hook list is a new list that will be added to the work-in-progress fiber.
work-in-progress hook 就是即将被添加到正在遍历fiber节点的hooks新链表
*/
let currentHook: Hook | null = null;
let nextCurrentHook: Hook | null = null;

无论是初次挂载还是更新，每调用一次 hooks 函数，都会产生一个 hook 对象与之对应，hook 对象结构如下

{
    baseQueue: null,     // 当前 update
    baseState: 'hook1',  // 初始值，即 useState 入参
    memoizedState: null, // 当前状态（更新时表示上一次的状态）
    queue: null,         // 待执行的更新队列(queue.pending)
    next: {              // 下一个 hook
        baseQueue: null,
        baseState: null,
        memoizedState: 'hook2',
        next: null
        queue: null
    }
}

产生的 hook 对象依次排列，形成链表存储到函数组件 fiber.memoizedState 上。在这个过程中，有一个十分重要的指针：workInProgressHook，它通过记录当前生成（更新）的 hook 对象，可以间接反映在组件中当前调用到哪个 hook 函数了。每调用一次 hook 函数，就将这个指针的指向移到该 hook 函数产生的 hook 对象上

比如先调用 hookA

fiber.memoizedState: hookA
                       ^
                workInProgressHook

调用 hookB

fiber.memoizedState: hookA -> hookB
                                ^
                         workInProgressHook

hooks 的更新队列​

这其实是个单链表环，存放某个 hook 的更新队列，如下图，是一个 useState 的更新队列：

任务待执行链表.png

其实还有一个副作用链表，跟 useEffect 有关，最终会挂到 root 节点上

源码执行流程​

renderWithHooks​

对于函数组件（FunctionComponent）类型，在 beginwork 的时候会调用 renderWithHooks 注册，根据 mount 还是 update 调用一个函数生成 hooks 链表挂在 Fiber 上

// renderWithHooks
function renderWithHooks(current, workInProgress, Component, props, secondArg, nextRenderLanes) {
  ...
  // 当前fiber
  currentlyRenderingFiber$1 = workInProgress;
  // hooks队列
  workInProgress.memoizedState = null;
  // 副作用队列
  workInProgress.updateQueue = null;
  {
    if (current !== null && current.memoizedState !== null) {
      ReactCurrentDispatcher$1.current = HooksDispatcherOnUpdateInDEV;
    } else if (hookTypesDev !== null) {
      ReactCurrentDispatcher$1.current = HooksDispatcherOnMountWithHookTypesInDEV;
    } else {
      ReactCurrentDispatcher$1.current = HooksDispatcherOnMountInDEV;
    }
  }
   ...
  return children;
}

mount​

usestate源码执行顺序mount.png

update​

usestate源码执行顺序.png

mount 阶段​

/**
 * ReactCurrentDispatcher 是一个内部储存状态的状态机.
 * 主要作用还是用于切换不同执行时机的 dispatcher 对象
 * */
const ReactCurrentDispatcher = { current: null };
function resolveDispatcher() {
  const dispatcher = ReactCurrentDispatcher.current;
  return dispatcher;
}
function useState(initialState) {
  var dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}
// resolveDispatcher
...
useState: function (initialState) {
      ...
      try {
        return mountState(initialState);
      } finally {
        ReactCurrentDispatcher$1.current = prevDispatcher;
      }
},
...
// mountWorkInProgressHook
function mountWorkInProgressHook() {
  var hook = {
    memoizedState: null,
    baseState: null,
    baseQueue: null,
    queue: null,
    next: null,
  };

  if (workInProgressHook === null) {
    currentlyRenderingFiber$1.memoizedState = workInProgressHook = hook;
  } else {
    workInProgressHook = workInProgressHook.next = hook;
  }

  return workInProgressHook;
}

// mountState
function mountState(initialState) {
  // 创建 hook 对象
  var hook = mountWorkInProgressHook();

  if (typeof initialState === "function") {
    initialState = initialState();
  }

  hook.memoizedState = hook.baseState = initialState;

  var queue = (hook.queue = {
    pending: null, // update 队列
    dispatch: null, // 触发函数，会触发更新，useState返回值的第二个参数
    lastRenderedReducer: basicStateReducer, // 最后一次使用的 reducer，初始化时使用最基础的 reducer
    lastRenderedState: initialState, // 上一次的值，挂载阶段该值为初始值
  });
  var dispatch = (queue.dispatch = dispatchAction.bind(
    null,
    currentlyRenderingFiber$1,
    queue
  ));
  // dispatch是一个闭包函数
  return [hook.memoizedState, dispatch];
}

useState 默认使用的更新器是 basicStateReducer

function basicStateReducer(state, action) {
  return typeof action === "function" ? action(state) : action;
}

update 阶段​

先执行 useState 返回的 dispatch 函数

// mountState
...
var dispatch = queue.dispatch = dispatchAction.bind(null, currentlyRenderingFiber$1, queue);
return [hook.memoizedState, dispatch];
function dispatchAction(fiber, queue, action) {
  ...
  // 更新对象，是一个链表节点
  var update = {
    lane: lane,         // 优先级
    action: action,     // 新值，也就是 setState 传入的参数
    next: null,         // 指向下一个更新对象
    eagerReducer: null, // 上一次使用的 reducer
    eagerState: null,   // 旧值
  };

  var pending = queue.pending;
  if (pending === null) {
    // 在队列上添加当前hook的首个更新对象，并保持循环
    update.next = update;
  } else {
    // 非首个更新对象，会追加到更新队列之后
    update.next = pending.next;
    pending.next = update;
  }
  queue.pending = update;

  // fiber.alternate 指向旧 fiber 链表
  var alternate = fiber.alternate;

  if (fiber === currentlyRenderingFiber$1 || alternate !== null && alternate === currentlyRenderingFiber$1) {
    didScheduleRenderPhaseUpdateDuringThisPass = didScheduleRenderPhaseUpdate = true;
  } else {
    if (fiber.lanes === NoLanes && (alternate === null || alternate.lanes === NoLanes)) {
      var lastRenderedReducer = queue.lastRenderedReducer;

      if (lastRenderedReducer !== null) {
        var prevDispatcher;

        {
          // NOTE 暂不清楚这一步的作用
          prevDispatcher = ReactCurrentDispatcher$1.current;
          ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
        }

        try {
          var currentState = queue.lastRenderedState;
          // 计算新的 state
          var eagerState = lastRenderedReducer(currentState, action);

          update.eagerReducer = lastRenderedReducer;
          update.eagerState = eagerState;

          if (objectIs(eagerState, currentState)) {
            // 前后值没变，没必要更新
            return;
          }
        } catch (error) {
            // Suppress the error. It will throw again in the render phase.
        } finally {
          {
            ReactCurrentDispatcher$1.current = prevDispatcher;
          }
        }
      }
    }
    ...
    // 发起一次调度更新
    scheduleUpdateOnFiber(fiber, lane, eventTime);
  }
}

更新 WorkInProgressHook

function updateWorkInProgressHook() {
  var nextCurrentHook;

  if (currentHook === null) {
    var current = currentlyRenderingFiber$1.alternate;

    if (current !== null) {
      nextCurrentHook = current.memoizedState;
    } else {
      nextCurrentHook = null;
    }
  } else {
    nextCurrentHook = currentHook.next;
  }

  var nextWorkInProgressHook;

  if (workInProgressHook === null) {
    nextWorkInProgressHook = currentlyRenderingFiber$1.memoizedState;
  } else {
    nextWorkInProgressHook = workInProgressHook.next;
  }

  if (nextWorkInProgressHook !== null) {
    workInProgressHook = nextWorkInProgressHook;
    nextWorkInProgressHook = workInProgressHook.next;
    currentHook = nextCurrentHook;
  } else {
    ...
    currentHook = nextCurrentHook;
    var newHook = {
      memoizedState: currentHook.memoizedState,
      baseState: currentHook.baseState,
      baseQueue: currentHook.baseQueue,
      queue: currentHook.queue,
      next: null
    };

    if (workInProgressHook === null) {
      currentlyRenderingFiber$1.memoizedState = workInProgressHook = newHook;
    } else {
      workInProgressHook = workInProgressHook.next = newHook;
    }
  }

  return workInProgressHook;
}

真正得到最终状态，其实是在下一次获取状态的时候。

更新阶段开始时，同样会执行 renderWithHooks，此时会将 ReactCurrentDispatcher.current 指向 HooksDispatcherOnUpdate 对象

const HooksDispatcherOnUpdate: Dispatcher = {
  ...
  useState: updateState,
}
function updateState(initialState) {
  return updateReducer(basicStateReducer, initialState);
}
...
// updateReducer
function updateReducer(reducer, initialArg, init) {
  var hook = updateWorkInProgressHook();
  var queue = hook.queue;
  ...
    do {
      ...
        if (update.eagerReducer === reducer) {
          newState = update.eagerState;
        } else {
          // 遍历更新队列，得到最新值
          var action = update.action;
          newState = reducer(newState, action);
        }
      ...
      update = update.next;
    } while (update !== null && update !== first);
  ...
  var dispatch = queue.dispatch;
  return [hook.memoizedState, dispatch];
}

简单总结一下 update 的过程：

  1. 调用 dispatcher 函数
  2. 收集 update，将 update 对象按序插入更新队列 queue.pending
  3. 调度一次 React 的更新
  4. 重新执行组件函数时，useState 会被重新执行，在 resolve dispatcher 的阶段取到负责更新的 dispatcher
  5. 按序执行更新队列，拿到最新的 state
  6. 渲染真实 DOM，更新结束

其他问题​

为什么在 React 16 前，函数式组件不能拥有状态管理？

因为 16 以前只有类组件在更新时存在实例，而 16 以后 Fiber 架构的出现，让每一个节点都拥有对应的实例，也就拥有了保存状态的能力

为什么只能在函数组件中使用 hooks？

只有函数组件才走 renderWithHooks 的逻辑

为什么 hooks 不能在循环、判断语句中调用，而只能在函数最外层使用？

因为在更新时，这个队列需要是一致的，才能保证 hooks 的结果正确。

useState 的 setState 是同步操作还是异步操作？

默认是异步。从上面的源码分析可以看出，执行 setState 时会将更新对象（update）存入更新队列，等到 commit 阶段才会一次性执行该更新队列。在没有重新执行 app 函数时，拿到的始终是旧状态，所以就造成了异步的现象

连续执行同一个 setState，会造成多次渲染吗？比如下面这段代码：

onClick = () => {
  setState(0);
  setState(1);
  setState(2);
};

不会。执行事件函数时，会判断当前是否处于批量更新（具体逻辑可以参见 scheduleUpdateOnFiber 源码），如果处于批量更新状态，说明还不能重新渲染，需要等待该状态结束（比如 react 中的 onClick 事件）。在批量更新阶段，每个 hooks 会通过 queue 将更新（update）存入更新队列（单链表）中，这个队列会保证更新顺序。等到批量更新状态结束了，才会重新执行组件函数，之后执行到对应 hook 时，会一次性执行挂载在 hook 上的更新队列，从而更新状态。

执行两次 setState(0) 会执行两次函数组件吗？

不会。在更新时会通过 ObjectIs 判断更新前后的值是否变化，如果没变化是不会调度更新的