kes ujian createWithEqualityFn dalam Zustand dijelaskan.

Dalam artikel ini, kami akan memahami kes ujian yang ditulis untuk mengesahkan createWithEqualityFn yang menghalang pemaparan semula berdasarkan syarat dan fungsi kesamaan yang boleh anda lalui.

Kod di bawah dipilih daripada basic.test.ts

it('uses the store with a selector and equality checker', async () => {
  const useBoundStore = createWithEqualityFn(
    () => ({ item: { value: 0 } }),
    Object.is,
  )
  const { setState } = useBoundStore
  let renderCount = 0

  function Component() {
    // Prevent re-render if new value === 1.
    const item = useBoundStore(
      (s) => s.item,
      (_, newItem) => newItem.value === 1,
    )
    return (
      <div>
        renderCount: {++renderCount}, value: {item.value}
      </div>
    )
  }

  const { findByText } = render(
    <>
      <Component />
    </>,
  )

  await findByText('renderCount: 1, value: 0')

  // This will not cause a re-render.
  act(() => setState({ item: { value: 1 } }))
  await findByText('renderCount: 1, value: 0')

  // This will cause a re-render.
  act(() => setState({ item: { value: 2 } }))
  await findByText('renderCount: 2, value: 2')
})

Zustand menggunakan Vitest untuk keperluan ujiannya. Mari lihat coretan kod di atas.

Mulakan createWithEqualityFn

const useBoundStore = createWithEqualityFn(
    () => ({ item: { value: 0 } }),
    Object.is,
  )

createWithEqualityFn dimulakan dengan keadaan () => ({ item: { nilai: 0 } }) dan fungsi kesamaan ialah Object.is

createWithEqualityFn menerima dua pembolehubah, createState dan defaultEqualityFn.

Halang paparan semula

// Prevent re-render if new value === 1.
    const item = useBoundStore(
      (s) => s.item,
      (_, newItem) => newItem.value === 1,
    )

useBoundStore menerima pemilih dan fungsi kesamaan yang digunakan untuk menghalang pemaparan semula berdasarkan nilai padanan.

Contoh di atas dalam ujian asas digunakan untuk menghalang pemaparan semula apabila nilainya ialah 1.

await findByText('renderCount: 1, value: 0')

// This will not cause a re-render.
act(() => setState({ item: { value: 1 } }))
await findByText('renderCount: 1, value: 0')

// This will cause a re-render.
act(() => setState({ item: { value: 2 } }))
await findByText('renderCount: 2, value: 2')

Pernyataan ini mengesahkan bahawa kemas kini keadaan tidak menyebabkan sebarang paparan semula.

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/tests/basic.test.tsx#L92

2. https://vitest.dev/guide/

Atas ialah kandungan terperinci kes ujian createWithEqualityFn dalam Zustand dijelaskan.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!