Es gibt zwei Arten von Umständen: Mounten und Aktualisieren, daher hat useMemo zwei Implementierungen: mountMemo und updateMemo.

• Der Quellcode von mountMemo:

function mountMemo(
  nextCreate: () => T,
  deps: Array | 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;
}

Erläuterung:
In der Mount-Phase ruft die Funktion useMemo die Callback-Funktion auf, um den Wert zu berechnen und zurückzugeben. Speichern Sie den Wert und deps in Hook.memoizedState.

1. Verwenden Sie mountWorkInProgressHook, um ein Hook-Objekt zu erstellen.

2. Speichern Sie die Deps in den nächsten Deps.

3. Rufen Sie nextCreate() auf, um nextValue zu erhalten. Wenn Sie sich in einer Entwicklungsumgebung befinden, rufen Sie zweimal auf.

4. Speichern Sie nextValue und nextDeps im Hook.memoizedState und geben Sie nextValue zurück.

• Der Quellcode von updateMemo:

function updateMemo(
  nextCreate: () => T,
  deps: Array | 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 | 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;
}

Erläuterung:
In der Aktualisierungsphase beurteilt React, ob sich die Deps geändert haben oder nicht. Bei Änderungen führt React den Rückruf aus, um den neuen Wert abzurufen und zurückzukehren. Wenn nicht geändert, gibt React den alten Wert zurück.

1. Holen Sie sich ein neues Hook-Objekt: Hook = updateWorkInProgressHook();
2. Wenn das Deps-Array leer ist, wenn (nextDeps !== null), rufen Sie die Rückruffunktion bei jedem Rendern auf und geben Sie einen neuen Wert zurück.
3. Wenn das Deps-Array nicht leer ist, beurteilen Sie, ob sich die Deps geändert haben oder nicht, wenn (areHookInputsEqual(nextDeps, prevDeps)). Wenn nicht geändert, den alten Wert zurückgeben return prevState[0];.