Heim > Web-Frontend > js-Tutorial > Der Quellcode von useMemo:

Der Quellcode von useMemo:

Patricia Arquette
Freigeben: 2024-10-04 18:21:31
Original
1143 Leute haben es durchsucht

The source code of useMemo:

There are two kinds of circumstances: mount and update, so useMemo has two implementations: mountMemo and updateMemo.

  • The source code of 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;
}


Nach dem Login kopieren

Explanation:
In the mount phase, the useMemo function calls the callback function to calculate and return the value. Save the value and deps into hook.memoizedState.

  1. Use mountWorkInProgressHook to create a hook object.

  2. Save deps in nextDeps.

  3. Call the nextCreate() to get nextValue. If in a dev environment, call twice.

  4. Save the nextValue and nextDeps in the hook.memoizedStateand return nextValue.

  • The source code of 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;
}


Nach dem Login kopieren

Explanation:
In the update phase, React will judge whether the deps have changed or not, if changed, React will run the callback to get the new value and return. If not changed, React will return the old value.

  1. Get a new hook object: hook = updateWorkInProgressHook();
  2. if deps array is empty if (nextDeps !== null), call the callback function every render and return new value.
  3. If the deps array is not empty, judge whether the deps have changed or not if (areHookInputsEqual(nextDeps, prevDeps)). If not changed, return the old value return prevState[0];.

Das obige ist der detaillierte Inhalt vonDer Quellcode von useMemo:. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage