В этой статье мы разберемся с тестовым примером, написанным для проверки 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 (
      

        renderCount: {  renderCount}, value: {item.value}
      
    )
  }

  const { findByText } = render(
    
      >,
  )

  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 инициализируется с состоянием () => ({ 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 мы стремимся обучать лучшим практикам, вдохновленным проектами с открытым исходным кодом.

Увеличьте свои навыки программирования в 10 раз, практикуя передовые архитектурные концепции в Next.js/React, изучайте лучшие практики и создавайте проекты промышленного уровня.

У нас открытый исходный код — https://github.com/thinkthroo/thinkthroo (дайте нам звезду!)

Повышайте квалификацию своей команды с помощью наших продвинутых курсов, основанных на архитектуре кодовой базы. Чтобы узнать больше, напишите нам по адресу [email protected]!

Ссылки:

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

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