Terdapat dua jenis keadaan: lekapkan dan kemas kini, jadi useMemo mempunyai dua pelaksanaan: mountMemo dan updateMemo.
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.
Gunakan mountWorkInProgressHook untuk mencipta objek cangkuk.
Simpan deps dalam nextDeps.
Panggil nextCreate() untuk mendapatkan nextValue. Jika dalam persekitaran dev, hubungi dua kali.
Simpan nextValue dan nextDeps dalam hook.memoizedStatedan kembalikan nextValue.
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.
Atas ialah kandungan terperinci Kod sumber useMemo:. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!