useBoundStoreWithEqualityFn dalam kod sumber Zustand dijelaskan.

Dalam artikel ini, kami akan memahami cara fungsi useBoundStoreWithEqualityFn digunakan dalam kod sumber Zustand.

Kod di atas dipilih daripada https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L80

useBoundStoreWithEqualityFn dipanggil dalam createWithEqualityFnImplfunction dan mengembalikan fungsi lain bernama useStoreWithEqualityFn.

Jom lihat apa yang ada dalam useStoreWithEqualityFn.

// Pulled from https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L80
export function useStoreWithEqualityFn<TState, StateSlice>(
  api: ReadonlyStoreApi<TState>,
  selector: (state: TState) => StateSlice = identity as any,
  equalityFn?: (a: StateSlice, b: StateSlice) => boolean,
) {
  const slice = useSyncExternalStoreWithSelector(
    api.subscribe,
    api.getState,
    api.getInitialState,
    selector,
    equalityFn,
  )
  useDebugValue(slice)
  return slice
}

useSyncExternalStore ialah React Hook yang membolehkan anda melanggan kedai luaran dan useSyncExternalStoreWithSelector diimport seperti yang ditunjukkan di bawah:

import useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector'

slice dikembalikan oleh fungsi ini, useStoreWithEqualityFn digunakan selanjutnya dalam createWithEqualityFnImpl .

const useBoundStoreWithEqualityFn: any = (
  selector?: any,
  equalityFn = defaultEqualityFn,
) => useStoreWithEqualityFn(api, selector, equalityFn)

Object.assign(useBoundStoreWithEqualityFn, api)

return useBoundStoreWithEqualityFn

Object.assign kemas kini kepingan yang dikembalikan oleh useBoundStoreWithEqualityFn dengan "api".

Tangkapan skrin di bawah menunjukkan dengan contoh bagaimana Object.assign melakukan kemas kini

dan akhirnya useBoundStoreWithEqualityFn dikembalikan oleh createWithEqualityFnImpl.

Tentang kami:

Di Think Throo, kami berada dalam misi untuk mengajar amalan terbaik yang diilhamkan oleh projek sumber terbuka.

10x kemahiran pengekodan anda dengan mempraktikkan konsep seni bina lanjutan dalam Next.js/React, pelajari amalan terbaik dan bina projek gred pengeluaran.

Kami adalah sumber terbuka — https://github.com/thinkthroo/thinkthroo (Beri kami bintang!)

Tingkatkan kemahiran pasukan anda dengan kursus lanjutan kami berdasarkan seni bina pangkalan kod. Hubungi kami di hello@thinkthroo.com untuk mengetahui lebih lanjut!

Rujukan:

1. https://github.com/search?q=useBoundStore&type=code

2. https://github.com/churichard/notabase

Atas ialah kandungan terperinci useBoundStoreWithEqualityFn dalam kod sumber Zustand dijelaskan.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!