createWithEqualityFnImpl dalam kod sumber Zustand dijelaskan.

Dalam artikel ini, kami akan menganalisis cara createWithEqualityFnImpl dilaksanakan dengan mengelog beberapa nilainya untuk mendapatkan pemahaman yang lebih baik.

Seperti yang anda boleh ketahui daripada imej di atas, createWithEqualityFn memanggil fungsi createWithEqualityFnImpl. Corak ini digunakan dalam vanilla.ts serta ditunjukkan di bawah:

export const createStore = ((createState) =>
  createState ? createStoreImpl(createState) : createStoreImpl) as CreateStore

createStore panggilan createStoreImpl dan createWithEqualityFn panggilan createWithhEqualityFnImpl.

Sebelum kita melangkah ke dalam pelaksanaan createWithEqualityFn, mari kita fahami tujuan menggunakan createWithEqualityFn.

Tangkapan skrin di atas adalah daripada https://github.com/pmndrs/zustand/tree/main

Anda boleh menggunakan createWithEqualityFn untuk mempunyai lebih kawalan ke atas pemaparan semula.

createWithEqualityFn

const createWithEqualityFnImpl = <T>(
  createState: StateCreator<T, [], []>,
  defaultEqualityFn?: <U>(a: U, b: U) => boolean,
) => {
  const api = createStore(createState)

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

  Object.assign(useBoundStoreWithEqualityFn, api)

  return useBoundStoreWithEqualityFn
}

useStoreWithEqualityFn

export function useStoreWithEqualityFn<S extends ReadonlyStoreApi<unknown>>(
  api: S,
): ExtractState<S>

export function useStoreWithEqualityFn<S extends ReadonlyStoreApi<unknown>, U>(
  api: S,
  selector: (state: ExtractState<S>) => U,
  equalityFn?: (a: U, b: U) => boolean,
): U

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
}

Ini adalah fungsi lebihan beban. useStoreWithEqualityFn mempunyai 3 takrifan:

export function useStoreWithEqualityFn<S extends ReadonlyStoreApi<unknown>>(
  api: S,
): ExtractState<S>

export function useStoreWithEqualityFn<S extends ReadonlyStoreApi<unknown>, U>(
  api: S,
  selector: (state: ExtractState<S>) => U,
  equalityFn?: (a: U, b: U) => boolean,
): U

export function useStoreWithEqualityFn<TState, StateSlice>(
  api: ReadonlyStoreApi<TState>,
  selector: (state: TState) => StateSlice = identity as any,
  equalityFn?: (a: StateSlice, b: StateSlice) => boolean,
) {

Mari lihat rupa nilai hirisan:

nilai: 1 dilangkau kerana kami menetapkan kod untuk mengelakkan pemaparan semula apabila nilainya ialah 1 seperti yang ditunjukkan di bawah:

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/pmndrs/zustand/blob/main/src/traditional.ts#L74

2. https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L39

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