Heim  >  Artikel  >  Web-Frontend  >  useBoundStoreWithEqualityFn im Quellcode von Zustand erklärt.

useBoundStoreWithEqualityFn im Quellcode von Zustand erklärt.

王林
王林Original
2024-09-11 06:37:35491Durchsuche

In diesem Artikel werden wir verstehen, wie die Funktion useBoundStoreWithEqualityFn im Quellcode von Zustand verwendet wird.

useBoundStoreWithEqualityFn in Zustand’s source code explained.

Der obige Code stammt von https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L80

useBoundStoreWithEqualityFn wird in der Funktion „createWithEqualityFnImpl“ aufgerufen und gibt eine weitere Funktion namens useStoreWithEqualityFn zurück.

Schauen wir uns an, was StoreWithEqualityFn verwendet.

// 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 ist ein React Hook, mit dem Sie einen externen Store abonnieren und useSyncExternalStoreWithSelector wie unten gezeigt importieren können:

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

Slice, das von dieser Funktion zurückgegeben wird, useStoreWithEqualityFn wird weiter in createWithEqualityFnImpl verwendet.

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

Object.assign(useBoundStoreWithEqualityFn, api)

return useBoundStoreWithEqualityFn

Object.assign aktualisiert das von useBoundStoreWithEqualityFn zurückgegebene Slice mit der „API“.

Der Screenshot unten zeigt anhand eines Beispiels, wie Object.assign das Update durchführt

useBoundStoreWithEqualityFn in Zustand’s source code explained.

und schließlich wird useBoundStoreWithEqualityFn von createWithEqualityFnImpl zurückgegeben.

Über uns:

Bei Think Throo haben wir die Mission, die Best Practices zu vermitteln, die von Open-Source-Projekten inspiriert sind.

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

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 hello@thinkthroo.com, um mehr zu erfahren!

Referenzen:

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

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



Das obige ist der detaillierte Inhalt vonuseBoundStoreWithEqualityFn im Quellcode von Zustand erklärt.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn