"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > O código-fonte do useMemo:

O código-fonte do useMemo:

Publicado em 2024-11-08
Navegar:603

The source code of useMemo:

Existem dois tipos de circunstâncias: montagem e atualização, então useMemo tem duas implementações: mountMemo e updateMemo.

  • O código fonte de 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;
}


Explicação:
Na fase de montagem, a função useMemo chama a função de retorno de chamada para calcular e retornar o valor. Salve o valor e as dependências em hook.memoizedState.

  1. Use mountWorkInProgressHook para criar um objeto de gancho.

  2. Salvar dependências em nextDeps.

  3. Chame nextCreate() para obter nextValue. Se estiver em um ambiente de desenvolvimento, ligue duas vezes.

  4. Salve o nextValue e nextDeps no hook.memoizedState e retorne nextValue.

  • O código fonte de 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;
}


Explicação:
Na fase de atualização, o React julgará se os deps foram alterados ou não; se alterados, o React executará o callback para obter o novo valor e retornar. Se não for alterado, o React retornará o valor antigo.

  1. Obtenha um novo objeto de gancho: hook = updateWorkInProgressHook();
  2. se a matriz deps estiver vazia if (nextDeps !== null), chame a função de retorno de chamada a cada renderização e retorne o novo valor.
  3. Se a matriz deps não estiver vazia, julgue se os deps foram alterados ou não se (areHookInputsEqual(nextDeps, prevDeps)). Se não for alterado, retorne o valor antigo return prevState[0];.
Declaração de lançamento Este artigo foi reproduzido em: https://dev.to/clara1123/the-source-code-of-usememo-5akk?1 Se houver alguma violação, entre em contato com [email protected] para excluí-lo
Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3