In diesem Artikel werden wir den Testfall verstehen, der zur Validierung von createWithEqualityFn geschrieben wurde, der ein erneutes Rendern basierend auf einer Bedingung und einer Gleichheitsfunktion verhindert, die Sie übergeben können.

Der folgende Code wird aus basic.test.ts ausgewählt

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 nutzt Vitest für seine Testanforderungen. Gehen wir das obige Code-Snippet durch.

createWithEqualityFn initialisieren

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

createWithEqualityFn wird mit dem Status () => ({ item: { value: 0 } }) initialisiert und die Gleichheitsfunktion ist Object.is

createWithEqualityFn akzeptiert zwei Variablen: createState und defaultEqualityFn.

Erneutes Rendern verhindern

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

useBoundStore akzeptiert den Selektor und die Gleichheitsfunktion, die verwendet wird, um ein erneutes Rendern basierend auf dem übereinstimmenden Wert zu verhindern.

Das obige Beispiel im basic.test wird verwendet, um ein erneutes Rendern zu verhindern, wenn der Wert 1 ist.

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

Diese Behauptungen bestätigen, dass die Statusaktualisierung kein erneutes Rendern verursacht.

Über uns:

Bei Think Throo haben wir es uns zur Aufgabe gemacht, die von Open-Source-Projekten inspirierten Best Practices zu vermitteln.

Verzehnfachen Sie Ihre Programmierkenntnisse, indem Sie fortgeschrittene Architekturkonzepte in Next.js/React üben, lernen Sie die Best Practices kennen und erstellen Sie Projekte in Produktionsqualität.

Wir sind Open Source – https://github.com/thinkthroo/thinkthroo (Geben Sie uns einen Stern!)

Verbessern Sie die Fähigkeiten Ihres Teams mit unseren Fortgeschrittenenkursen basierend auf der Codebasis-Architektur. Kontaktieren Sie uns unter [email protected], um mehr zu erfahren!

Referenzen:

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

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