Set() penggunaan dalam kod sumber negeri.

Dalam artikel ini, kami akan memahami cara kaedah Set() digunakan dalam kod sumber Zustand.

jadi pendengar dalam Zustand pada asasnya adalah Set. Coretan kod di atas dipilih daripada vanilla.ts

Set

Objek Set membolehkan anda menyimpan nilai unik dari sebarang jenis, sama ada nilai primitif atau rujukan objek. Objek tetapkan ialah koleksi nilai. Nilai dalam set hanya boleh berlaku sekali; ia adalah unik dalam koleksi set. Anda boleh lelaran melalui elemen set dalam susunan sisipan. — Dokumen MDN

const mySet1 = new Set();

mySet1.add(1); // Set(1) { 1 }
mySet1.add(5); // Set(2) { 1, 5 }
mySet1.add(5); // Set(2) { 1, 5 }
mySet1.add("some text"); // Set(3) { 1, 5, 'some text' }

for (const item of mySet1) {
  console.log(item);
}
// 1, 5, 'some text'

pendengar ditambah dalam fungsi melanggan dalam Zustand. Mari lihat lebih dekat pada melanggan

langgan

Bagaimanakah cara melanggan digunakan dalam projek React? penjelasan di bawah dipetik daripada Readme Zustand.

Fungsi langgan membenarkan komponen terikat pada bahagian keadaan tanpa memaksa pemaparan semula pada perubahan. Lebih baik menggabungkannya dengan useEffect untuk nyahlanggan automatik apabila dinyahlekap. Ini boleh memberi kesan prestasi yang drastik apabila anda dibenarkan mengubah pandangan secara langsung.

const useScratchStore = create((set) => ({ scratches: 0, ... }))
const Component = () => {
  // Fetch initial state
  const scratchRef = useRef(useScratchStore.getState().scratches)
  // Connect to the store on mount, disconnect on unmount, catch state-changes in a reference
  useEffect(() => useScratchStore.subscribe(
    state => (scratchRef.current = state.scratches)
  ), [])
  ...

Sekarang mari lihat kod sumber langganan dalam Zustand.

const subscribe: StoreApi<tstate>['subscribe'] = (listener) => {
    listeners.add(listener)
    // Unsubscribe
    return () => listeners.delete(listener)
}
</tstate>

langgan hanya menambah pendengar kepada Set pendengar.

Mari lihat apa yang dikatakan oleh log daripada percubaan. Untuk menambah pernyataan console.log, saya menyusun Zustand menggunakan arahan pnpm run build dan menyalin dist ke dalam contoh/demo/src. Nampak meretas, tetapi kami sedang bereksperimen dan memikirkan cara Zustand berfungsi secara dalaman.

Beginilah rupa Set pendengar

Saya melanggan perubahan dalam App.jsx

// Subscribe to changes in the state
useStore.subscribe((state) => {
  console.log("State changed: ", state);
});

Satu lagi pemerhatian ialah, terdapat pendengar tambahan yang ditambahkan pada set ini:

ƒ () {
  if (checkIfSnapshotChanged(inst)) {
    forceStoreRerender(fiber);
  }
}

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!)

Ingin membina sistem web yang dipesan lebih dahulu untuk perniagaan anda? Hubungi kami di hello@thinkthroo.com

Mengenai pengarang:

Hei, saya Ram. Saya seorang jurutera perisian/OSS Tinkerer yang bersemangat.

Lihat tapak web saya: https://www.ramunarasinga.com/

Rujukan:

1. https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L62

2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

3. https://github.com/pmndrs/zustand/tree/main?tab=readme-ov-file#transient-updates-for-often-occurring-state-changes

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