In diesem Artikel analysieren wir, wie createWithEqualityFnImpl implementiert wird, indem wir einen Teil seines Wertes protokollieren, um ein besseres Verständnis zu erhalten.

Wie Sie dem obigen Bild entnehmen können, ruft createWithEqualityFn die Funktion createWithEqualityFnImpl auf. Dieses Muster wird in Vanilla.ts verwendet und unten gezeigt:

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

createStore ruft createStoreImpl auf und createWithEqualityFn ruft createWithhEqualityFnImpl auf.

Bevor wir mit der Ausführung von createWithEqualityFn beginnen, wollen wir zunächst den Zweck der Verwendung von createWithEqualityFn verstehen.

Der obige Screenshot stammt von https://github.com/pmndrs/zustand/tree/main

Sie können createWithEqualityFn verwenden, um mehr Kontrolle über das erneute Rendern zu haben.

createWithEqualityFn

const createWithEqualityFnImpl = (
  createState: StateCreator,
  defaultEqualityFn?: (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>(
  api: S,
): ExtractState

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

export function useStoreWithEqualityFn(
  api: ReadonlyStoreApi,
  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
}

Dies ist eine Überladungsfunktion. useStoreWithEqualityFn hat 3 Definitionen:

export function useStoreWithEqualityFn>(
  api: S,
): ExtractState

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

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

Sehen wir uns an, wie der Slice-Wert aussieht:

Wert: 1 wird übersprungen, da wir den Code so eingestellt haben, dass ein erneutes Rendern vermieden wird, wenn der Wert 1 ist, wie unten gezeigt:

Über uns:

Bei Think Throo haben wir es uns zur Aufgabe gemacht, die von Open-Source-Projekten inspirierten Best Practices zu vermitteln.

Verzehnfachen Sie Ihre Programmierkenntnisse, indem Sie fortgeschrittene Architekturkonzepte in Next.js/React üben, lernen Sie die Best Practices kennen und erstellen Sie Projekte in Produktionsqualität.

Wir sind Open Source – https://github.com/thinkthroo/thinkthroo (Geben Sie uns einen Stern!)

Verbessern Sie die Fähigkeiten Ihres Teams mit unseren Fortgeschrittenenkursen basierend auf der Codebasis-Architektur. Kontaktieren Sie uns unter [email protected], um mehr zu erfahren!

Referenzen:

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

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