useMemo的原始碼：

有兩種情況：mount和update，所以useMemo有兩種實作：mountMemo和updateMemo。

• mountMemo原始碼：

function mountMemo<t>(
  nextCreate: () => T,
  deps: Array<mixed> | void | null,
): T {
  const hook = mountWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  const nextValue = nextCreate();
  if (shouldDoubleInvokeUserFnsInHooksDEV) {
    setIsStrictModeForDevtools(true);
    nextCreate();
    setIsStrictModeForDevtools(false);
  }
  hook.memoizedState = [nextValue, nextDeps];
  return nextValue;
}


</mixed></t>

說明：
在掛載階段，useMemo函數呼叫回呼函數計算並傳回值。將值和依賴項儲存到 hook.memoizedState 中。

1. 使用 mountWorkInProgressHook 建立鉤子物件。

2. 將 deps 保存在 nextDeps 中。

3. 呼叫nextCreate()取得nextValue。如果在開發環境中，請呼叫兩次。

4. 將 nextValue 和 nextDeps 保存在 hook.memoizedState 中並傳回 nextValue。

• updateMemo的原始碼：

function updateMemo<t>(
  nextCreate: () => T,
  deps: Array<mixed> | void | null,
): T {
  const hook = updateWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  const prevState = hook.memoizedState;
  // Assume these are defined. If they're not, areHookInputsEqual will warn.
  if (nextDeps !== null) {
    const prevDeps: Array<mixed> | null = prevState[1];
    if (areHookInputsEqual(nextDeps, prevDeps)) {
      return prevState[0];
    }
  }
  const nextValue = nextCreate();
  if (shouldDoubleInvokeUserFnsInHooksDEV) {
    setIsStrictModeForDevtools(true);
    nextCreate();
    setIsStrictModeForDevtools(false);
  }
  hook.memoizedState = [nextValue, nextDeps];
  return nextValue;
}


</mixed></mixed></t>

說明：
在更新階段，React 會判斷 deps 是否發生變化，如果發生變化，React 將運行回呼以取得新值並返回。如果不更改，React 將傳回舊值。

1. 取得新的鉤子物件：hook = updateWorkInProgressHook();
2. 如果 deps 陣列為空 if (nextDeps !== null)，則每次渲染時呼叫回呼函數並傳回新值。
3. 如果deps數組不為空，則判斷deps是否發生變化 if (areHookInputsEqual(nextDeps, prevDeps))。如果沒有改變，則傳回舊值 return prevState[0];.

以上是useMemo的原始碼：的詳細內容。更多資訊請關注PHP中文網其他相關文章！