React Hooks: useTransition React Hooks: useTransition

說明#

本文基於 v18.1.0 進行分析。
閱讀本文需先閱讀 React Hooks: hooks 鏈表、React Hooks: useState 分析。
調試基於 React Hooks: useState 內關於插隊的程式碼。

TLNR#

該 Hook 的返回值 startTransition 接收一個函數，函數內觸發的更新都會被標記為低優先級，從而允許其它優先級更高的更新優先被處理。

mount 階段的 useTranstion#

對調試程式碼中的 useTranstion 打上斷點，我們會在 mount 階段時進入 mountTransition 這一函數。

function mountTransition(): [
  boolean,
  (callback: () => void, options?: StartTransitionOptions) => void,
] {
  // useState 那篇文章內有介紹過，不再囉嗦
  // 但這裡可以看出 useTranstion 也會存在一個對應的 hook 實例（儘管是基於useState實現的） 
  const [isPending, setPending] = mountState(false);
  // The `start` method never changes.
  // 此處是關鍵實現，下面會分析
  const start = startTransition.bind(null, setPending);
  // hooks 鏈表裡介紹過，不再囉嗦
  const hook = mountWorkInProgressHook();
  hook.memoizedState = start;
  return [isPending, start];
}

從程式碼中不難發現，關鍵的分析點在於 startTransition，因此我們看看它的實現是什麼。

// 刪掉了一些不重要的程式碼
function startTransition(setPending, callback, options) {
  // 創建變數緩存當前的 update 優先級
  // 該優先級可被 getCurrentUpdatePriority 與 setCurrentUpdatePriority訪問到
  const previousPriority = getCurrentUpdatePriority();
  setCurrentUpdatePriority(
    // 比較當前優先級與 ContinuousEventPriority 間誰更優先，並設置為當前的優先級
    higherEventPriority(previousPriority, ContinuousEventPriority),
  );
  // 這裡通過調用 useState 的 dispatch 函數，創建了較高優先級的 update 實例
  setPending(true);
  
  // 直接修改 ReactCurrentBatchConfig 的值，這將影響後續生成 update 的優先級
  // 具體的程式碼可以看生成 update 實例時調用的 requestUpdateLane 函數
  const prevTransition = ReactCurrentBatchConfig.transition;
  ReactCurrentBatchConfig.transition = {};
  const currentTransition = ReactCurrentBatchConfig.transition;

  if (enableTransitionTracing) {
    if (options !== undefined && options.name !== undefined) {
      ReactCurrentBatchConfig.transition.name = options.name;
      ReactCurrentBatchConfig.transition.startTime = now();
    }
  }
  // 總的來說，上面對 ReactCurrentBatchConfig 的操作將會影響下面的 setPending 與 callback 內生成的 update 實例的優先級，而其優先級必然是低於第一次調用 setPending 所生成的 update 實例的優先級的
  // 而低優先級的 update 又會在處理狀態更新時被跳過，這裡在 useState 的文章裡也有提及
  try {
    setPending(false);
    callback();
  } finally {
    // 這裡是重置的操作，將優先級恢復到原先的狀態
    setCurrentUpdatePriority(previousPriority);

    ReactCurrentBatchConfig.transition = prevTransition;

    ...
  }
}

總結#

很簡單的一個鉤子，總的原理便是將包裹在 callback 內所生成的更新打上低優先級的標記，從而讓其他的更新優先處理。