Kod sumber useMemo:

Patricia Arquette
Lepaskan: 2024-10-04 18:21:31
asal
1098 orang telah melayarinya

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;
}


Salin selepas log masuk

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;
}


Salin selepas log masuk

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!

sumber:dev.to
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!