createWithEqualityFnImpl dans le code source de Zustand expliqué.

Dans cet article, nous analyserons comment createWithEqualityFnImpl est implémenté en enregistrant une partie de sa valeur pour mieux comprendre.

Comme vous pouvez le constater sur l'image ci-dessus, createWithEqualityFn appelle la fonction createWithEqualityFnImpl. Ce modèle est utilisé dans vanilla.ts ainsi que démontré ci-dessous :

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

createStore appelle createStoreImpl et createWithEqualityFn appelle createWithhEqualityFnImpl.

Avant de nous lancer dans l'exécution de createWithEqualityFn, comprenons d'abord le but de l'utilisation de createWithEqualityFn.

La capture d'écran ci-dessus provient de https://github.com/pmndrs/zustand/tree/main

Vous pouvez utiliser createWithEqualityFn pour avoir plus de contrôle sur le nouveau rendu.

créerAvecEqualityFn

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
}

Il s'agit d'une fonction de surcharge. useStoreWithEqualityFn a 3 définitions :

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,
) {

Voyons à quoi ressemble la valeur de la tranche :

valeur : 1 est ignorée car nous définissons le code pour éviter un nouveau rendu lorsque la valeur est 1, comme indiqué ci-dessous :

À propos de nous :

Chez Think Throo, nous avons pour mission d'enseigner les meilleures pratiques inspirées des projets open source.

10x vos compétences en codage en pratiquant des concepts architecturaux avancés dans Next.js/React, apprenez les meilleures pratiques et construisez des projets de niveau production.

Nous sommes open source — https://github.com/thinkthroo/thinkthroo (Donnez-nous une étoile !)

Développez les compétences de votre équipe avec nos cours avancés basés sur l'architecture de base de code. Contactez-nous à hello@thinkthroo.com pour en savoir plus !

Références :

1. https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L74

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!