前言

有過 React 經(jīng)驗(yàn)的開發(fā)者可能都使用過 React DevTools。

DevTools 提供了豐富的能力：展示組件樹，組件的 props 與組件中 hook 的值。

React DevTools 是如何檢測當(dāng)前網(wǎng)頁是否使用 React 以及是如何獲取組件相關(guān)的眾多數(shù)據(jù)呢？

React DevTools 的原理

打開 ReactDOM 代碼時(shí)，用 devtools 為關(guān)鍵字搜索，你會(huì)發(fā)現(xiàn)許多與 React DevTools 相關(guān)的代碼。

function injectInternals(internals) {
  if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined') {
    // No DevTools
    return false;
  }
  var hook = __REACT_DEVTOOLS_GLOBAL_HOOK__;
  try {
    rendererID = hook.inject(internals); // We have successfully injected, so now it is safe to set up hooks.
    injectedHook = hook;
  } catch (err) {
    // ...
  } // DevTools exists
}

在瀏覽器控制臺(tái)輸入 __REACT_DEVTOOLS_GLOBAL_HOOK__ 詳細(xì)看一下這個(gè)對象。

這個(gè)對象十分復(fù)雜，以下的幾個(gè)方法倒是很值得關(guān)注。

onCommitFiberRoot

onCommitFiberUnmount

onPostCommitFiberRoot

渲染階段

從名稱來看，上面這幾個(gè)方法與 ReactDOM 的渲染密切相關(guān)。

ReactDOM 在特定的階段會(huì)調(diào)用這些的方法，比如：onCommitFiberRoot。

function onCommitRoot(root, priorityLevel) {
  if (injectedHook && typeof injectedHook.onCommitFiberRoot === 'function') {
    try {
      // ...
      injectedHook.onCommitFiberRoot(rendererID, root, priorityLevel, didError);
    } catch (err) {}
  }
}

正是借助 __REACT_DEVTOOLS_GLOBAL_HOOK__，React DevTools 便與 ReactDOM 建立起了聯(lián)系，從而擁有獲取組件眾多信息的能力。

FiberRoot/FiberNode

在新的 React 架構(gòu)下，會(huì)先把 Virtual DOM 轉(zhuǎn)成 FiberNode，然后再渲染 FiberNode。

onCommitFiberRoot 等方法中的傳遞的數(shù)據(jù)正是 FiberNode。

FiberNode 的結(jié)構(gòu)是比較復(fù)雜的，可以簡化為如下的結(jié)構(gòu)：

interface ReactFiberRootNode {
  current: ReactFiberNode;
  // ...
}
interface ReactFiberNode {
  tag: number;
  stateNode: null | HTMLElement; // dom 節(jié)點(diǎn)
  memoizedProps?: Record<string, any>; // props
  memoizedState: ClassComponentState | HookLinkedQueue | null; // hooks
  child?: ReactFiberNode;
  sibling?: ReactFiberNode;
  return: ReactFiberNode; // parent
  // ...
}

從上面的結(jié)構(gòu)可以看出，F(xiàn)iberNode 包含了非常多與組件相關(guān)的信息。

stateNode 為組件對應(yīng)真實(shí)的 DOM 節(jié)點(diǎn)，memoizedProps 為組件的 props。

當(dāng)組件為函數(shù)式組件時(shí)，tag 為 0，memoizedState 保存了組件中的 hooks 信息。

當(dāng)組件為類組件時(shí)，tag 為 1，memoizedState 則是組件的 state。

如下圖所示，F(xiàn)iberNode 節(jié)點(diǎn)形成一個(gè)鏈表結(jié)構(gòu)。

只要能找到組件對應(yīng)的 FiberNode，我們便可以做到在運(yùn)行期間以無侵入的方法獲取組件的眾多信息。比如：通過 FiberNode 進(jìn)行遍歷，實(shí)現(xiàn) findNativeNodesForFiber 方法，用以查找其對應(yīng)的真實(shí) DOM 節(jié)點(diǎn)。

function findNativeNodesForFiber(node?: ReactFiberNode) {
  // ...
  // 先遍歷 child
  const { child } = node;
  collectStateNode();
  // 再遍歷所有的 sibling
  let current = child?.sibling;
  while (current) {
    collectStateNode();
    current = current.sibling;
  }
  // ...
}

React DevTools 中審查元素功能正是基于類似的原理去實(shí)現(xiàn)。

memoizedState 與 React Hooks

上文中提到當(dāng)組件為函數(shù)式組件時(shí)，memoizedState 保存了 React Hooks 相關(guān)的信息。與 FiberNode 類似，React Hooks 也形成一個(gè)鏈表。

export interface HookLinkedQueue {
  memoizedState: any; // 渲染時(shí)的值
  next: HookLinkedQueue | null;
  // ...
}

React Hook 將其數(shù)據(jù)都保存在 memoizedState 上。比如對于 useRef 來說，ref.current 值就是 memoizedState。類似的，可以實(shí)現(xiàn) inspectSomeHooksOfFiber 來獲取組件內(nèi)使用特定 hook 中保存的值。

function inspectRefHooksOfFiber(node: ReactFiberNode) {
  let current: HookLinkedQueue | null = node.memoizedState;
  while (current) {
    retrieveValue(current);
    current = current.next;
  }
}

實(shí)踐：突破 useDebugValue 的限制

useDebugValue 是 React 內(nèi)置的一個(gè) hook，用以在 React DevTools 中顯示自定義 hook 的標(biāo)簽。它的限制是只能在 hook 中使用。借助前文介紹的知識(shí)點(diǎn)，我們可以實(shí)現(xiàn)一個(gè)增加版的 useDebugValue，你可以像普通的 hook 一樣來使用它，沒有其他限制。

useDebugValueAnywhere 的實(shí)現(xiàn)

useDebugValueAnywhere 實(shí)現(xiàn)比較簡單，name 表明數(shù)據(jù)的名稱，用一個(gè)特殊的 ref 對象來存儲(chǔ) debug 相關(guān)的數(shù)據(jù)。

export function useDebugValueAnywhere(name: string, data: any) {
  const ref = useRef({
    [DebugHookKey]: {
      name,
      data,
    },
  });
  // ...
}

特定的 devtools

參考 React DevTools 的邏輯，在 __REACT_DEVTOOLS_GLOBAL_HOOK__ 中注入我們的 onCommitFiberRoot 方法，從而確保 ReactDOM 每次渲染時(shí)，能獲取最新的 FiberNode。

currentHook.onCommitFiberRoot = function (...args) {
  handleCommitFiberRoot(...args); // 注入
  oldOnCommitFiberRoot.apply(this, args);
};

接下來便是對 FiberNode 進(jìn)行遍歷。在遍歷的過程中，檢查每個(gè) FiberNode 中 memoizedState 鏈表，檢測組件的 hooks 中是否用到了 useDebugValueAnywhere。

如果存在，就將值 FiberNode 與 hook 中的值保存起來。

{
  visitFiberNode(node?: ReactFiberNode) {
    if (!node) return;
    this.inspectFiber(node);
    this.visitFiberNode(node.child);
    let { sibling } = node;
    while (sibling) {
      this.visitFiberNode(sibling);
      sibling = sibling.sibling;
    }
  }
}

剩下的工作就是考慮以何種形式去展示收集到的 debug 信息。在 PC 端可以直接輸出數(shù)據(jù)到控制臺(tái)；在移動(dòng)端 vConsole 使用較多，那么就可以基于 vConsole 開發(fā)一個(gè)插件，實(shí)現(xiàn)一個(gè)極簡版的 React DevTools，專門用以展示這些信息。

完整的代碼。

總結(jié)

本文剖析了 React DevTools 的原理，介紹隱藏在 ReactDOM 中的一些特性，并帶領(lǐng)大家熟悉了一下 React Fiber 架構(gòu)。基于上述原理，可以開發(fā)一個(gè)增加版的 useDebugValue。

由于本文介紹的特性并非公開的 API，沒有兼容性。當(dāng) React/ReactDOM 版本升級時(shí)，還需要再做適配，因此只適合用來開發(fā) DevTools 之類的工具，不推薦業(yè)務(wù)開發(fā)使用。