Le code source de useMemo :

Il existe deux types de circonstances : le montage et la mise à jour, donc useMemo a deux implémentations : mountMemo et updateMemo.

• Le code source de 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;
}

Explication :
Dans la phase de montage, la fonction useMemo appelle la fonction de rappel pour calculer et renvoyer la valeur. Enregistrez la valeur et les dépôts dans hook.memoizedState.

1. Utilisez mountWorkInProgressHook pour créer un objet hook.

2. Enregistrez les dépôts dans nextDeps.

3. Appelez nextCreate() pour obtenir nextValue. Si vous êtes dans un environnement de développement, appelez deux fois.

4. Enregistrez la nextValue et le nextDeps dans le hook.memoizedState et renvoyez la nextValue.

• Le code source de 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;
}

Explication :
Dans la phase de mise à jour, React jugera si les dépôts ont changé ou non, s'ils sont modifiés, React exécutera le rappel pour obtenir la nouvelle valeur et reviendra. S'il n'est pas modifié, React renverra l'ancienne valeur.

1. Obtenez un nouvel objet hook : hook = updateWorkInProgressHook();
2. si le tableau deps est vide if (nextDeps !== null), appelez la fonction de rappel à chaque rendu et renvoyez une nouvelle valeur.
3. Si le tableau deps n'est pas vide, jugez si les deps ont changé ou non if (areHookInputsEqual(nextDeps, prevDeps)). Si elle n'est pas modifiée, renvoie l'ancienne valeur return prevState[0];.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!