关于前端:彻底搞懂Reacthook链表构建原理

写在后面的小结

• 每一个 hook 函数都有对应的 hook 对象保留状态信息
• useContext是惟一一个不须要增加到 hook 链表的 hook 函数
• 只有 useEffect、useLayoutEffect 以及 useImperativeHandle 这三个 hook 具备副作用，在 render 阶段须要给函数组件 fiber 增加对应的副作用标记。同时这三个 hook 都有对应的 effect 对象保留其状态信息
• 每次渲染都是从新构建 hook 链表以及 收集 effect list(fiber.updateQueue)
• 首次渲染调用 mountWorkInProgressHook 构建 hook 链表。更新渲染调用 updateWorkInProgressHook 构建 hook 链表并复用上一次的 hook 状态信息

Demo

能够用上面的 demo 在本地调试

import React, {
  useState,
  useEffect,
  useContext,
  useCallback,
  useMemo,
  useRef,
  useImperativeHandle,
  useLayoutEffect,
  forwardRef,
} from "react";
import ReactDOM from "react-dom";
const themes = {
  foreground: "red",
  background: "#eeeeee",
};
const ThemeContext = React.createContext(themes);

const Home = forwardRef((props, ref) => {
  debugger;
  const [count, setCount] = useState(0);
  const myRef = useRef(null);
  const theme = useContext(ThemeContext);
  useEffect(() => {console.log("useEffect", count);
  }, [count]);
  useLayoutEffect(() => {console.log("useLayoutEffect...", myRef);
  });
  const res = useMemo(() => {console.log("useMemo");
    return count * count;
  }, [count]);
  console.log("res...", res);
  useImperativeHandle(ref, () => ({focus: () => {myRef.current.focus();
    },
  }));

  const onClick = useCallback(() => {setCount(count + 1);
  }, [count]);
  return (<div style={{ color: theme.foreground}} ref={myRef} onClick={onClick}>
      {count}    </div>
  );
});

ReactDOM.render(<Home />, document.getElementById("root"));

fiber

React 在首次渲染或者更新过程中，都会在 render 阶段创立新的或者复用旧的 fiber 节点。每一个函数组件，都有对应的 fiber 节点。

fiber 的次要属性如下：

var fiber = {
  alternate,
  child,
  elementType: () => {},
  memoizedProps: null,
  memoizedState: null, // 在函数组件中，memoizedState 用于保留 hook 链表
  pendingProps: {},
  return,
  sibling,
  stateNode,
  tag, // fiber 的节点类型，首次渲染时，函数组件对应的 tag 为 2，后续更新过程中对应的 tag 为 0
  type: () => {}
  updateQueue: null,
}

在函数组件的 fiber 中，有两个属性和 hook 无关：memoizedState 和updateQueue 属性。

• memoizedState 属性用于保留 hook 链表，hook 链表是单向链表。
• updateQueue 属性用于收集 hook 的副作用信息，保留 useEffect、useLayoutEffect、useImperativeHandle 这三个 hook 的 effect 信息，是一个环状链表，其中 updateQueue.lastEffect 指向最初一个 effect 对象。effect 形容了 hook 的信息，比方useLayoutEffect 的 effect 对象保留了监听函数，革除函数，依赖等。

hook 链表

React 为咱们提供的以 use 结尾的函数就是 hook，实质上函数在执行实现后，就会被销毁，而后状态失落。React 能记住这些函数的状态信息的根本原因是，在函数组件执行过程中，React 会为每个 hook 函数创立对应的 hook 对象，而后将状态信息保留在 hook 对象中，在下一次更新渲染时，会从这些 hook 对象中获取上一次的状态信息。

在函数组件执行的过程中，比方上例中，当执行 Home() 函数组件时，React 会为组件内每个 hook 函数创立对应的 hook 对象，这些 hook 对象保留 hook 函数的信息以及状态，而后将这些 hook 对象连成一个链表。上例中，第一个执行的是useState hook，React 为其创立一个 hook：stateHook。第二个执行的是useRef hook，同样为其创立一个 hook：refHook，而后将 stateHook.next 指向 refHook：stateHook.next = refHook。同理，refHook.next = effectHook，…

须要留神：

• useContext是惟一一个不会呈现在 hook 链表中的 hook。
• useState 是 useReducer 的语法糖，因而这里只须要用 useState 举例就好。
• useEffect、useLayoutEffect、useImperativeHandle这三个 hook 都是属于 effect 类型的 hook，他们的 effect 对象都须要被增加到函数组件 fiber 的 updateQueue 中，以便在 commit 阶段执行。

上例中，hook 链表如下红色虚线中所示：

hook 对象及其属性介绍

函数组件外部的每一个 hook 函数，都有对应的 hook 对象用来保留 hook 函数的状态信息，hook 对象的属性如下：

var hook = {
  memoizedState,,
  baseState,
  baseQueue,
  queue,
  next,
};

留神，hook 对象中的 memoizedState 属性和 fiber 的 memoizedState 属性含意不同。next 指向下一个 hook 对象，函数组件中的 hook 就是通过 next 指针连成链表

同时，不同的 hook 中，memoizedState 的含意不同，上面具体介绍各类型 hook 对象的属性含意

useState Hook 对象

• hook.memoizedState 保留的是 useState 的 state 值。比方 const [count, setCount] = useState(0)中，memoizedState 保留的就是 state 的值。
• hook.queue 保留的是更新队列，是个环状链表。queue 的属性如下：

hook.queue = {
  pending: null,
  dispatch: null,
  lastRenderedReducer: basicStateReducer,
  lastRenderedState: initialState,
};

比方咱们在 onClick 中屡次调用setCount：

const onClick = useCallback(() => {
  debugger;
  setCount(count + 1);
  setCount(2);
  setCount(3);
}, [count]);

每次调用setCount，都会创立一个新的 update 对象，并增加进 hook.queue 中，update 对象属性如下：

var update = {
  lane: lane,
  action: action, // setCount 的参数
  eagerReducer: null,
  eagerState: null,
  next: null,
};

queue.pending 指向最初一个更新对象。queue 队列如下红色实线所示

参考 前端进阶面试题具体解答

在 render 阶段，会遍历 hook.queue，计算最终的 state 值，并存入 hook.memoizedState 中，

useRef Hook

• hook.memoizedState 保留的是 ref 的值。比方

const myRef = useRef(null);

那么 memoizedState 保留的是 myRef 的值，即：

hook.memoizedState = {current,};

useEffect、useLayoutEffect 以及 useImperativeHandle

• memoizedState 保留的是一个 effect 对象，effect 对象保留的是 hook 的状态信息，比方监听函数，依赖，革除函数等，属性如下：

var effect = {
  tag: tag, // effect 的类型，useEffect 对应的 tag 为 5，useLayoutEffect 对应的 tag 为 3
  create: create, // useEffect 或者 useLayoutEffect 的监听函数，即第一个参数
  destroy: destroy, // useEffect 或者 useLayoutEffect 的革除函数，即监听函数的返回值
  deps: deps, // useEffect 或者 useLayoutEffect 的依赖，第二个参数
  // Circular
  next: null, // 在 updateQueue 中应用，将所有的 effect 连成一个链表
};

这三个 hook 都属于 effect 类型的 hook，即具备副作用的 hook

• useEffect 的副作用为：Update | Passive，即 516
• useLayoutEffect 和 useImperativeHandle 的副作用都是：Update，即 4

在函数组件中，也就只有这三个 hook 才具备副作用 ，在 hook 执行的过程中须要给 fiber 增加对应的副作用标记。而后在 commit 阶段执行对应的操作，比方调用useEffect 的监听函数，革除函数等等。

因而，React 须要将这三个 hook 函数的 effect 对象存到 fiber.updateQueue 中，以便在 commit 阶段遍历 updateQueue，执行对应的操作。updateQueue 也是一个环状链表，lastEffect 指向最初一个 effect 对象。effect 和 effect 之间通过 next 相连。

const effect = {create: () => {console.log("useEffect", count); },
    deps: [0]
    destroy: undefined,
    tag: 5,
}
effect.next = effect
fiber.updateQueue = {lastEffect: effect,};

fiber.updateQueue 如下图红色实线所示：

hook 对应的 effect 对象如下图红色实线所示：

useMemo

• hook.memoizedState 保留的是 useMemo 的值和依赖。比方

const res = useMemo(() => {return count * count;}, [count]);

那么 memoizedState 保留的是返回值以及依赖，即

hook.memoizedState = [count * count, [count]];

useCallback

hook.memoizedState 保留的是回调函数和依赖，比方

const onClick = useCallback(callback dep);

那么 memoizedState=[callback, dep]

构建 Hook 链表的源码

React 在 首次渲染 和更新 这两个过程，构建 hook 链表的算法不一样，因而 React 对这两个过程是离开解决的：

var HooksDispatcherOnMount = {
  useCallback: mountCallback,
  useContext: readContext,
  useEffect: mountEffect,
  useImperativeHandle: mountImperativeHandle,
  useLayoutEffect: mountLayoutEffect,
  useMemo: mountMemo,
  useRef: mountRef,
  useState: mountState,
};
var HooksDispatcherOnUpdate = {
  useCallback: updateCallback,
  useContext: readContext,
  useEffect: updateEffect,
  useImperativeHandle: updateImperativeHandle,
  useLayoutEffect: updateLayoutEffect,
  useMemo: updateMemo,
  useRef: updateRef,
  useState: updateState,
};

如果是首次渲染，则应用 HooksDispatcherOnMount，此时如果咱们调用 useState，实际上调用的是HooksDispatcherOnMount.useState，执行的是mountState 办法。

如果是更新阶段，则应用HooksDispatcherOnUpdate，此时如果咱们调用 useState，实际上调用的是HooksDispatcherOnUpdate.useState，执行的是updateState

首次渲染和更新渲染执行 hook 函数的区别在于：

• 构建 hook 链表的算法不同。首次渲染只是简略的构建 hook 链表。而更新渲染会遍历上一次的 hook 链表，构建新的 hook 链表，并复用上一次的 hook 状态
• 依赖的判断。首次渲染不须要判断依赖。更新渲染须要判断依赖是否变动。
• 对于 useState 来说，更新阶段还须要遍历 queue 链表，计算最新的状态。

renderWithHooks 函数组件执行

不论是首次渲染还是更新渲染，函数组件的执行都是从 renderWithHooks 函数开始执行。

function renderWithHooks(current, workInProgress, Component, props) {
  currentlyRenderingFiber = workInProgress;
  workInProgress.memoizedState = null;
  workInProgress.updateQueue = null;

  ReactCurrentDispatcher.current =
    current === null || current.memoizedState === null
      ? HooksDispatcherOnMount
      : HooksDispatcherOnUpdate;

  var children = Component(props, secondArg);

  currentlyRenderingFiber = null;
  currentHook = null;
  workInProgressHook = null;

  return children;
}

renderWithHooks 的 Component 参数就是咱们的函数组件，在本例中，就是 Home 函数。

Component 开始执行前，会重置 memoizedState 和 updateQueue 属性，因而每次渲染都是从新构建 hook 链表以及收集 effect list

renderWithHooks 办法初始化以下全局变量

• currentlyRenderingFiber。fiber 节点。以后正在执行的函数组件对应的 fiber 节点，这里是 Home 组件的 fiber 节点
• ReactCurrentDispatcher.current。负责派发 hook 函数，首次渲染时，指向 HooksDispatcherOnMount，更新渲染时指向 HooksDispatcherOnUpdate。比方咱们在函数组件外部调用 useState，实际上调用的是：

function useState(initialState) {var dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}
function resolveDispatcher() {
  var dispatcher = ReactCurrentDispatcher.current;
  return dispatcher;
}

每一个 hook 函数在执行时，都会调用 resolveDispatcher 办法获取以后的 dispatcher，而后调用dispatcher 中对应的办法解决 mount 或者 update 逻辑。

以 useEffect 为例，在首次渲染时调用的是：

function mountEffectImpl(fiberFlags, hookFlags, create, deps) {var hook = mountWorkInProgressHook();
  var nextDeps = deps === undefined ? null : deps;
  currentlyRenderingFiber.flags |= fiberFlags;
  hook.memoizedState = pushEffect(
    HasEffect | hookFlags,
    create,
    undefined,
    nextDeps
  );
}

在更新渲染时，调用的是

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

  if (currentHook !== null) {
    var prevEffect = currentHook.memoizedState;
    destroy = prevEffect.destroy;

    if (nextDeps !== null) {
      var prevDeps = prevEffect.deps;

      if (areHookInputsEqual(nextDeps, prevDeps)) {pushEffect(hookFlags, create, destroy, nextDeps);
        return;
      }
    }
  }

  currentlyRenderingFiber.flags |= fiberFlags;
  hook.memoizedState = pushEffect(
    HasEffect | hookFlags,
    create,
    destroy,
    nextDeps
  );
}

pushEffect 办法构建一个 effect 对象并增加到 fiber.updateQueue 中，同时返回 effect 对象。

mountEffectImpl 办法逻辑比较简单，而 updateEffectImpl 办法还多了一个判断依赖是否变动的逻辑。

mountWorkInProgressHook以及 updateWorkInProgressHook 办法用来在函数组件执行过程中构建 hook 链表，这也是构建 hook 链表的算法。每一个 hook 函数在执行的过程中都会调用这两个办法

构建 hook 链表的算法

首次渲染和更新渲染，构建 hook 链表的算法不同。首次渲染应用mountWorkInProgressHook，而更新渲染应用updateWorkInProgressHook。

• mountWorkInProgressHook 间接为每个 hook 函数创立对应的 hook 对象
• updateWorkInProgressHook 在执行每个 hook 函数时，同时遍历上一次的 hook 链表，以复用上一次 hook 的状态信息。这个算法稍稍简单

React 应用全局变量 workInProgressHook 保留以后正在执行的 hook 对象。比方，本例中，第一个执行的是useState，则此时workInProgressHook=stateHook。第二个执行的是useRef，则此时workInProgressHook=refHook，…。

能够将 workInProgressHook 看作链表的指针

mountWorkInProgressHook 构建 hook 链表算法

代码如下

function mountWorkInProgressHook() {
  var hook = {
    memoizedState: null,
    baseState: null,
    baseQueue: null,
    queue: null,
    next: null,
  };

  if (workInProgressHook === null) {
    // hook 链表中的第一个 hook
    currentlyRenderingFiber.memoizedState = workInProgressHook = hook;
  } else {
    // 增加到 hook 链表开端
    workInProgressHook = workInProgressHook.next = hook;
  }

  return workInProgressHook;
}

能够看出，首次渲染构建 hook 链表的算法逻辑非常简单，为每一个 hook 函数创立对应的 hook 对象，而后增加到 hook 链表开端就行

updateWorkInProgressHook 构建 hook 链表算法

更新渲染阶段构建 hook 链表的算法就比拟麻烦。咱们从 fiber 开始

咱们晓得 React 在 render 阶段会复用 fiber 节点，假如咱们第一次渲染实现的 fiber 节点如下：

var firstFiber = {
  ..., // 省略其余属性
  alternate: null, // 因为是第一次渲染，alternate 为 null
  memoizedState, // 第一次渲染构建的 hook 链表
  updateQueue, // 第一次渲染收集的 effect list
};

当咱们点击按钮触发更新，renderWithHooks 函数开始调用，但 Home 函数执行前，此时 workInProgressHook、currentHook 都为 null。同时新的 fiber 的 memoizedState、updateQueue 都被重置为 null

workInProgressHook用于构建新的 hook 链表

currentHook用于遍历上一次渲染构建的 hook 链表，即旧的链表，或者以后的链表(即和以后显示的页面对应的 hook 链表)

依照本例中调用 hook 函数的程序，一步步拆解 updateWorkInProgressHook 算法的过程

• 第一步 调用 useState

因为此时 currentHook 为 null，因而咱们须要初始化它指向旧的 hook 链表的第一个 hook 对象。

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

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

currentHook = nextCurrentHook;

创立一个新的 hook 对象，复用上一次的 hook 对象的状态信息，并初始化 hook 链表

var newHook = {
  memoizedState: currentHook.memoizedState,
  baseState: currentHook.baseState,
  baseQueue: currentHook.baseQueue,
  queue: currentHook.queue,
  next: null, // 留神，next 被重置了!!!!!
};

if (workInProgressHook === null) {currentlyRenderingFiber.memoizedState = workInProgressHook = newHook;}

• 第二步 调用 useRef

此时 currentHook 曾经有值，指向第一个 hook 对象。因而将 currentHook 指向它的下一个 hook 对象，即第二个

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

同样的，也须要为 useRef 创立一个新的 hook 对象，并复用上一次的 hook 状态

前面的 hook 的执行过程和 useRef 一样，都是一边遍历旧的 hook 链表，为以后 hook 函数创立新的 hook 对象，而后复用旧的 hook 对象的状态信息，而后增加到 hook 链表中

从更新渲染的过程也能够看出，hook 函数的执行是会遍历旧的 hook 链表并复用旧的 hook 对象的状态信息。这也是为什么咱们不能将 hook 函数写在条件语句或者循环中的根本原因，咱们必须保障 hook 函数的程序在任何时候都要统一

残缺源码

最终残缺的算法如下：

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) {
    // There's already a work-in-progress. Reuse it.
    workInProgressHook = nextWorkInProgressHook;
    nextWorkInProgressHook = workInProgressHook.next;
    currentHook = nextCurrentHook;
  } else {
    // Clone from the current hook.
    if (!(nextCurrentHook !== null)) {
      {throw Error(formatProdErrorMessage(310));
      }
    }

    currentHook = nextCurrentHook;
    var newHook = {
      memoizedState: currentHook.memoizedState,
      baseState: currentHook.baseState,
      baseQueue: currentHook.baseQueue,
      queue: currentHook.queue,
      next: null,
    };

    if (workInProgressHook === null) {
      // This is the first hook in the list.
      currentlyRenderingFiber$1.memoizedState = workInProgressHook = newHook;
    } else {
      // Append to the end of the list.
      workInProgressHook = workInProgressHook.next = newHook;
    }
  }

  return workInProgressHook;
}