useSyncExternalStoreExports in Zustand source code explained.

In diesem Artikel werden wir uns ansehen, wie Zustand useSyncExternalStoreExports in seinem [Quellcode] verwendet.

useSyncExternalStoreExports wird aus use-sync-external-store/shim/with-selector importiert. use-sync-external-store ist ein abwärtskompatibler Shim für React.useSyncExternalStore Funktioniert mit jedem React, der Hooks unterstützt.

Wenn Sie den obigen Satz lesen, fragen Sie sich vielleicht, was ein Nutzen von SyncExternalStore ist.

useSyncExternalStore

useSyncExternalStore ist ein React Hook, mit dem Sie einen externen Store abonnieren können.

const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)

Verwenden Sie useSyncExternalStore, um einen Wert aus einem externen Speicher zu lesen, der sein kann:

1. Zustandsverwaltungsbibliotheken von Drittanbietern, die Zustände außerhalb von React speichern.

2. Browser-APIs, die einen veränderlichen Wert und Ereignisse offenlegen, um seine Änderungen zu abonnieren.

Beispielverwendung:

import { useSyncExternalStore } from 'react';
import { todosStore } from './todoStore.js';

function TodosApp() {
  const todos = useSyncExternalStore(todosStore.subscribe, todosStore.getSnapshot);
  // ...
}

Das obige Beispiel stammt aus React-Dokumenten.

useSyncExternalStore Usage In Zustand:

Zustand verwendet useSyncExternalStore in src/traditional.ts.

import ReactExports from 'react'
// eslint-disable-next-line import/extensions
import useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector'
import { createStore } from './vanilla.ts'
import type {
  Mutate,
  StateCreator,
  StoreApi,
  StoreMutatorIdentifier,
} from './vanilla.ts'

const { useDebugValue } = ReactExports
const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports

useSyncExternalStoreWithSelector ist von useSyncExternalStoreExports destrukturiert und wird in useStoreWithEqualityFn verwendet.

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
}

useSyncExternalStoreWithSelector verfügt über api.subscribe, api.getState, api.getInitialState, selector und equalityFn.

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

2. https://www.npmjs.com/package/use-sync-external-store

3. https://legacy.reactjs.org/docs/hooks-reference.html#usesyncexternalstore

4. https://react.dev/reference/react/useSyncExternalStore

5. https://github.com/reactwg/react-18/discussions/86

Das obige ist der detaillierte Inhalt vonuseSyncExternalStoreExports in Zustand source code explained.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!