createWithEqualityFn-Testfall im Zustand erklärt.

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 (
      <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 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 () => initialisiert. ({ item: { value: 0 } }) 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 Zustandsaktualisierung kein erneutes Rendern verursacht.

Über uns:

Bei Think Throo haben wir die Mission, die Best Practices zu vermitteln, die von Open-Source-Projekten inspiriert sind.

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

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 hello@thinkthroo.com, um mehr zu erfahren!

Referenzen:

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

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

Das obige ist der detaillierte Inhalt voncreateWithEqualityFn-Testfall im Zustand erklärt.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!