Hooks - implementation初探

上一篇文章简单介绍了一下两种比较常用的Hooks - useState 和 useEffect
最近稍微拜读了一下Fiber的代码，尝试解释一下这两个Hook的实现。

Fiber reconciler

首先我们知道的是React维护了一个自己的Virtual DOM tree，当我们要创建一个新的元素Element时，是在VDOM tree上挂载mount, 更新update, 渲染render，最终在真实的DOM tree上绘制paint的。

在React里，实际上对一个元素，自顶向下的来说有三层认知层次：
a. DOM 
真实的DOM结点，是我们最终看到的HTML上所写的结点。
b. Instance
也就是React所维护的实例，即Virtual DOM结点
c. Element 
也就是我们所编写的代码，用来描述一个元素的样式和要展示的数据。我们调用的render方法实际上是告诉React要更新对应的Instance了。

同时JS是在浏览器的主线程上运行的，和样式计算、布局等绘制工作一起运行。

这样就导致一个问题，如果一个Element的更新时间太长，导致JS占用了很多浏览器资源，使得这次render以及paint的时间超过了1/24秒，那么就会出现肉眼可见的页面卡顿。

于是React 16发布了React Fiber reconciler来解决这个卡顿问题。
主要解决方法是把一次render任务拆分成一些更小的任务，每做完一段就把时间控制权交回给浏览器，不让JS一次占用太多时间。
为此我们又种了两棵树fiber tree(取代了原来的VDOM tree) 和 workInProgress tree，其中fiber tree是由fiber nodes组成的，记录了增量更新时需要的上下文信息，而workInProgress tree则是一个进度快照，用来进行断点恢复。
一个fiber node长得像这样:

{
  return, //当前结点处理完后，向谁提交结果，即父结点
  child,
  sibling,
  ...
}

而workInProgress tree则是由fiber tree构造出来的，其维护了一个effect list，当fiber结点需要更新时，则给当前这个结点打一个tag，同时当前结点的effect（需要实施的更新）会返回给自己的return，这样当workInProgress tree构造出来时，其根节点的effect list就是要做的所有side effect。此过程中的任何一步都可以中断。
之后执行commit操作，即渲染DOM Node，此过程是不可中断的。
值得注意的是，fiber node和workInProgress node使用的是同样的数据结构。
实际上当commit操作完成以后，react将workInProgress tree和fiber node的指针互换，因为此时workInProgress tree的状态和真实的DOM tree相同。

Hooks

现在我们对上文所述的fiber node扩充一下

{
   return, //当前结点处理完后，向谁提交结果，即父结点
  child,
  sibling,
  memoizedState,
}

React在每次结点render之前会计算出当前的state并赋值给fiber实例的memoizedState，再调用render方法。所以React可以根据这条属性拿到当前的state。
对于一个class形式的component来说，我们可以很轻松的将state与memoizedState对应起来。
而在一个function形式的component里，我们一般是这样使用state的

const Example = () => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
}

我们知道fiber node上只有一个memoizedState，但在Hooks中，React并不知道我们调用了几次useState，我们要怎么把每个Hook的state合并到fiber node上的memoizedState上呢？
React定义了一个Hook对象：

{
  memoizedState: any,

  baseState: any,
  baseUpdate: Update<any, any> | null,
  queue: UpdateQueue<any, any> | null,

  next: Hook | null,
}

这样当我们每调用一次useState，React就创建了一个新的Hook对象，然后连接到当前Hooks链表的尾部。
也因此，我们在看Hooks文档的时候会发现有一条规则，不要在条件判断语句里使用Hooks
每次useXXX在执行的时候，第一个运行的函数是下面这个：

function mountWorkInProgressHook(): Hook {
  const hook: Hook = {
    memoizedState: null,

    baseState: null,
    queue: null,
    baseUpdate: null,

    next: null,
  };

  if (workInProgressHook === null) {
    // This is the first hook in the list
    firstWorkInProgressHook = workInProgressHook = hook;
  } else {
    // Append to the end of the list
    workInProgressHook = workInProgressHook.next = hook;
  }
  return workInProgressHook;
}

如上例中，如果Name这个Hook因为某些原因被跳过的话，那么我们的Email会成为这次函数执行里第一次被调用的Hook，也就是会拿到当前Hooks list里的第一个值。

那么setState是怎样实现的呢？上源码

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 = (hook.queue = {
    last: null,
    dispatch: null,
    lastRenderedReducer: basicStateReducer,
    lastRenderedState: (initialState: any),
  });
  const dispatch: Dispatch<
    BasicStateAction<S>,
  > = (queue.dispatch = (dispatchAction.bind(
    null,
    // Flow doesn't know this is non-null, but we do.
    ((currentlyRenderingFiber: any): Fiber),
    queue,
  ): any));
  return [hook.memoizedState, dispatch];
}

mountState是我们实际调用的useState实现，根据代码我们可以看出来，我们拿到的setState方法实际上是一个Dispatch，而当我们调用得到的setState时，会创建一个Update对象：

type Update<S, A> = {
  expirationTime: ExpirationTime,
  suspenseConfig: null | SuspenseConfig,
  action: A,
  eagerReducer: ((S, A) => S) | null,
  eagerState: S | null,
  next: Update<S, A> | null,
};

action是我们传给dispatch的action也就是setState传入的值。
当我们收集到所有的update之后，就会调用React的更新，当其执行到我们的这个Functional Component时，就会执行对应的useState, 其Hook对象上的queue保存了我们要执行的update,执行完所有update后拿到最终的state保存到memoizedState上，起到setState的效果。你可能要问为什么queue是个UpdateQueue，因为我们可能会调用多次setState。
当所有的Hook执行完以后，拿到全部memoizedState，更新到fiber node上。

同样的，React也为Effect提供了一个对象:

type Effect = {
  tag: HookEffectTag,
  create: () => (() => void) | void,
  destroy: (() => void) | void,
  deps: Array<mixed> | null,
  next: Effect,
};

useEffct的调用分了三个阶段:

function mountEffect(
  create: () => (() => void) | void,
  deps: Array<mixed> | void | null,
): void {
  if (__DEV__) {
    // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
    if ('undefined' !== typeof jest) {
      warnIfNotCurrentlyActingEffectsInDEV(
        ((currentlyRenderingFiber: any): Fiber),
      );
    }
  }
  return mountEffectImpl(
    UpdateEffect | PassiveEffect,
    UnmountPassive | MountPassive,
    create,
    deps,
  );
}

在这个阶段给useEffect打上了一个effectTag用来标记这个Effect的类型

function mountEffectImpl(fiberEffectTag, hookEffectTag, create, deps): void {
  const hook = mountWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  sideEffectTag |= fiberEffectTag;
  hook.memoizedState = pushEffect(hookEffectTag, create, undefined, nextDeps);
}

这个阶段把当前Effect的tag更新到了整个component上

function pushEffect(tag, create, destroy, deps) {
  const effect: Effect = {
    tag,
    create,
    destroy,
    deps,
    // Circular
    next: (null: any),
  };
  if (componentUpdateQueue === null) {
    componentUpdateQueue = createFunctionComponentUpdateQueue();
    componentUpdateQueue.lastEffect = effect.next = effect;
  } else {
    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;
}

最后一个阶段，把当前effect添加到componentUpdateQueue的尾部。
值得注意的一点是，componentUpdateQueue最终形成了一个环，因此需要一个lastEffect标记实际上的最后一个Effect是谁。

在拿到所有的effect后，React将componentUpdateQueue更新给了currentlyRenderingFiber的updateQueue，最终由workInProgress tree去收集并执行所有fiber node上的effect。