Rumah >hujung hadapan web >tutorial js >Kod sumber useMemo:

Kod sumber useMemo:

Patricia Arquette
Patricia Arquetteasal
2024-10-04 18:21:311185semak imbas

The source code of useMemo:

Terdapat dua jenis keadaan: lekapkan dan kemas kini, jadi useMemo mempunyai dua pelaksanaan: mountMemo dan updateMemo.

  • Kod sumber 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;
}


Penjelasan:
Dalam fasa pelekap, fungsi useMemo memanggil fungsi panggil balik untuk mengira dan mengembalikan nilai. Simpan nilai dan masukkan ke dalam hook.memoizedState.

  1. Gunakan mountWorkInProgressHook untuk mencipta objek cangkuk.

  2. Simpan deps dalam nextDeps.

  3. Panggil nextCreate() untuk mendapatkan nextValue. Jika dalam persekitaran dev, hubungi dua kali.

  4. Simpan nextValue dan nextDeps dalam hook.memoizedStatedan kembalikan nextValue.

  • Kod sumber 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;
}


Penjelasan:
Dalam fasa kemas kini, React akan menilai sama ada deps telah berubah atau tidak, jika diubah, React akan menjalankan panggilan balik untuk mendapatkan nilai baharu dan kembali. Jika tidak ditukar, React akan mengembalikan nilai lama.

  1. Dapatkan objek cangkuk baharu: cangkuk = updateWorkInProgressHook();
  2. jika tatasusunan deps kosong jika (nextDeps !== null), panggil fungsi panggil balik setiap pemaparan dan kembalikan nilai baharu.
  3. Jika tatasusunan deps tidak kosong, nilaikan sama ada deps telah berubah atau tidak jika (areHookInputsEqual(nextDeps, prevDeps)). Jika tidak diubah, kembalikan pulangan nilai lama prevState[0];.

Atas ialah kandungan terperinci Kod sumber useMemo:. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn