Zustand 中的 createWithEqualityFn 測試案例進行了解釋。

在本文中，我們將了解為驗證 createWithEqualityFn 而編寫的測試案例，該測試案例可根據您可以傳遞的條件和相等函數來防止重新渲染。

以下程式碼摘自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 使用 Vitest 來滿足其測試需求。讓我們來看看上面的程式碼片段。

初始化createWithEqualityFn

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

createWithEqualityFn 使用 state () => 進行初始化({ item: { value: 0 } }) 且相等函數為 Object.is

createWithEqualityFn 接受兩個變量，createState 和 defaultEqualityFn。

防止重新渲染

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

useBoundStore 接受選擇器和用於根據匹配值防止重新渲染的相等函數。

上面basic.test中的例子是用來防止值為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')

這些斷言驗證狀態更新不會導致任何重新渲染。

關於我們：

在 Think Throo，我們的使命是教授受開源專案啟發的最佳實踐。

透過在 Next.js/React 中練習高階架構概念，將您的編碼技能提高 10 倍，學習最佳實踐並建立生產級專案。

我們是開源的 — https://github.com/thinkthroo/thinkthroo （請給我們一顆星！）

透過我們基於程式碼庫架構的高階課程來提升您的團隊的技能。請透過 hello@thinkthroo.com 與我們聯繫以了解更多資訊！

參考資料：

1. https://github.com/pmndrs/zustand/blob/main/tests/basic.test.tsx#L92

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

以上是Zustand 中的 createWithEqualityFn 測試案例進行了解釋。的詳細內容。更多資訊請關注PHP中文網其他相關文章！