useSyncExternalStoreExports dalam kod sumber negeri dijelaskan.

Dalam artikel ini, kita akan melihat cara Zustand menggunakan useSyncExternalStoreExports dalam [kod sumber.]

useSyncExternalStoreExports diimport daripada use-sync-external-store/shim/with-selector. use-sync-external-store ialah shim yang serasi ke belakang untuk React.useSyncExternalStore Berfungsi dengan mana-mana React yang menyokong Cangkuk.

Membaca ayat di atas, anda mungkin tertanya-tanya apakah kegunaanSyncExternalStore.

useSyncExternalStore

useSyncExternalStore ialah React Hook yang membolehkan anda melanggan kedai luaran.

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

Gunakan useSyncExternalStore untuk membaca nilai dari kedai luaran yang boleh:

1. Perpustakaan pengurusan negeri pihak ketiga yang mengekalkan keadaan di luar React.

2. API Penyemak imbas yang mendedahkan nilai dan peristiwa boleh ubah untuk melanggan perubahannya.

Contoh penggunaan:

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

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

Contoh di atas dipilih daripada React docs.

useSyncExternalStore Penggunaan Dalam Zustand:

Zustand menggunakan useSyncExternalStore dalam 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 dinyahstruktur daripada useSyncExternalStoreExports dan ini digunakan dalam useStoreWithEqualityFn.

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 mempunyai api.subscribe, api.getState, api.getInitialState, pemilih dan equalityFn.

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#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

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