上一篇文章簡單介紹了一下兩種比較常用的Hooks - useState 和 useEffect
最近稍微拜讀了一下Fiber的代碼，嘗試解釋一下這兩個Hook的實現(xiàn)。

Fiber reconciler

首先我們知道的是React維護(hù)了一個自己的Virtual DOM tree，當(dāng)我們要創(chuàng)建一個新的元素Element時，是在VDOM tree上掛載mount, 更新update, 渲染render，最終在真實的DOM tree上繪制paint的。

在React里，實際上對一個元素，自頂向下的來說有三層認(rèn)知層次：
a. DOM 
真實的DOM結(jié)點(diǎn)，是我們最終看到的HTML上所寫的結(jié)點(diǎn)。
b. Instance
也就是React所維護(hù)的實例，即Virtual DOM結(jié)點(diǎn)
c. Element 
也就是我們所編寫的代碼，用來描述一個元素的樣式和要展示的數(shù)據(jù)。我們調(diào)用的render方法實際上是告訴React要更新對應(yīng)的Instance了。

同時JS是在瀏覽器的主線程上運(yùn)行的，和樣式計算、布局等繪制工作一起運(yùn)行。

這樣就導(dǎo)致一個問題，如果一個Element的更新時間太長，導(dǎo)致JS占用了很多瀏覽器資源，使得這次render以及paint的時間超過了1/24秒，那么就會出現(xiàn)肉眼可見的頁面卡頓。

于是React 16發(fā)布了React Fiber reconciler來解決這個卡頓問題。
主要解決方法是把一次render任務(wù)拆分成一些更小的任務(wù)，每做完一段就把時間控制權(quán)交回給瀏覽器，不讓JS一次占用太多時間。
為此我們又種了兩棵樹fiber tree(取代了原來的VDOM tree) 和 workInProgress tree，其中fiber tree是由fiber nodes組成的，記錄了增量更新時需要的上下文信息，而workInProgress tree則是一個進(jìn)度快照，用來進(jìn)行斷點(diǎn)恢復(fù)。
一個fiber node長得像這樣:

{
  return, //當(dāng)前結(jié)點(diǎn)處理完后，向誰提交結(jié)果，即父結(jié)點(diǎn)
  child,
  sibling,
  ...
}

而workInProgress tree則是由fiber tree構(gòu)造出來的，其維護(hù)了一個effect list，當(dāng)fiber結(jié)點(diǎn)需要更新時，則給當(dāng)前這個結(jié)點(diǎn)打一個tag，同時當(dāng)前結(jié)點(diǎn)的effect（需要實施的更新）會返回給自己的return，這樣當(dāng)workInProgress tree構(gòu)造出來時，其根節(jié)點(diǎn)的effect list就是要做的所有side effect。此過程中的任何一步都可以中斷。
之后執(zhí)行commit操作，即渲染DOM Node，此過程是不可中斷的。
值得注意的是，fiber node和workInProgress node使用的是同樣的數(shù)據(jù)結(jié)構(gòu)。
實際上當(dāng)commit操作完成以后，react將workInProgress tree和fiber node的指針互換，因為此時workInProgress tree的狀態(tài)和真實的DOM tree相同。

Hooks

現(xiàn)在我們對上文所述的fiber node擴(kuò)充一下

{
   return, //當(dāng)前結(jié)點(diǎn)處理完后，向誰提交結(jié)果，即父結(jié)點(diǎn)
  child,
  sibling,
  memoizedState,
}

React在每次結(jié)點(diǎn)render之前會計算出當(dāng)前的state并賦值給fiber實例的memoizedState，再調(diào)用render方法。所以React可以根據(jù)這條屬性拿到當(dāng)前的state。
對于一個class形式的component來說，我們可以很輕松的將state與memoizedState對應(yīng)起來。
而在一個function形式的component里，我們一般是這樣使用state的

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

我們知道fiber node上只有一個memoizedState，但在Hooks中，React并不知道我們調(diào)用了幾次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,
}

這樣當(dāng)我們每調(diào)用一次useState，React就創(chuàng)建了一個新的Hook對象，然后連接到當(dāng)前Hooks鏈表的尾部。
也因此，我們在看Hooks文檔的時候會發(fā)現(xiàn)有一條規(guī)則，不要在條件判斷語句里使用Hooks
每次useXXX在執(zhí)行的時候，第一個運(yùn)行的函數(shù)是下面這個：

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會成為這次函數(shù)執(zhí)行里第一次被調(diào)用的Hook，也就是會拿到當(dāng)前Hooks list里的第一個值。

那么setState是怎樣實現(xiàn)的呢？上源碼

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是我們實際調(diào)用的useState實現(xiàn)，根據(jù)代碼我們可以看出來，我們拿到的setState方法實際上是一個Dispatch，而當(dāng)我們調(diào)用得到的setState時，會創(chuàng)建一個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傳入的值。
當(dāng)我們收集到所有的update之后，就會調(diào)用React的更新，當(dāng)其執(zhí)行到我們的這個Functional Component時，就會執(zhí)行對應(yīng)的useState, 其Hook對象上的queue保存了我們要執(zhí)行的update,執(zhí)行完所有update后拿到最終的state保存到memoizedState上，起到setState的效果。你可能要問為什么queue是個UpdateQueue，因為我們可能會調(diào)用多次setState。
當(dāng)所有的Hook執(zhí)行完以后，拿到全部memoizedState，更新到fiber node上。

同樣的，React也為Effect提供了一個對象:

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

useEffct的調(diào)用分了三個階段:

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用來標(biāo)記這個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);
}

這個階段把當(dāng)前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;
}

最后一個階段，把當(dāng)前effect添加到componentUpdateQueue的尾部。
值得注意的一點(diǎn)是，componentUpdateQueue最終形成了一個環(huán)，因此需要一個lastEffect標(biāo)記實際上的最后一個Effect是誰。

在拿到所有的effect后，React將componentUpdateQueue更新給了currentlyRenderingFiber的updateQueue，最終由workInProgress tree去收集并執(zhí)行所有fiber node上的effect。