Reaktivität

Tanstack Form verursacht keine Re-Renders, wenn mit dem Formular interagiert wird. Daher werden Sie vielleicht feststellen, dass Sie versuchen, einen Formular- oder Feldstatuswert ohne Erfolg zu verwenden.

Wenn Sie auf reaktive Werte zugreifen möchten, müssen Sie diese mit einer von zwei Methoden abonnieren: useStore oder die form.Subscribe Komponente.

Einige Anwendungen für diese Abonnements sind das Rendern aktueller Feldwerte, das Bestimmen, was basierend auf einer Bedingung gerendert werden soll, oder die Verwendung von Feldwerten innerhalb der Logik Ihrer Komponente.

Für Situationen, in denen Sie auf Auslöser "reagieren" möchten, sehen Sie sich die Listener API an.

Der Hook useStore ist perfekt, wenn Sie innerhalb der Logik Ihrer Komponente auf Formularwerte zugreifen müssen. useStore nimmt zwei Parameter entgegen. Erstens den Formular-Store. Zweitens einen Selektor, um das Stück des Formulars, das Sie abonnieren möchten, genau anzupassen.

const firstName = useStore(form.store, (state) => state.values.firstName)
const errors = useStore(form.store, (state) => state.errorMap)

const firstName = useStore(form.store, (state) => state.values.firstName)
const errors = useStore(form.store, (state) => state.errorMap)

Sie können in dem Selektor auf jedes Stück des Formularzustands zugreifen.

Beachten Sie, dass useStore einen vollständigen Komponenten-Re-Render auslöst, wenn sich der abonnierte Wert ändert.

Obwohl es MÖGLICH ist, den Selektor wegzulassen, widerstehen Sie der Versuchung, da das Weglassen zu vielen unnötigen Re-Renders führen würde, wenn sich irgendein Formularzustand ändert.

Die form.Subscribe Komponente eignet sich am besten, wenn Sie innerhalb der Benutzeroberfläche Ihrer Komponente auf etwas reagieren müssen. Zum Beispiel das Anzeigen oder Ausblenden der Benutzeroberfläche basierend auf dem Wert eines Formularfelds.

<form.Subscribe
  selector={(state) => state.values.firstName}
  children={(firstName) => (
    <form.Field>
      {(field) => (
        <input
          name="lastName"
          value={field.state.lastName}
          onChange={field.handleChange}
        />
      )}
    </form.Field>
  )}
/>

<form.Subscribe
  selector={(state) => state.values.firstName}
  children={(firstName) => (
    <form.Field>
      {(field) => (
        <input
          name="lastName"
          value={field.state.lastName}
          onChange={field.handleChange}
        />
      )}
    </form.Field>
  )}
/>

Die form.Subscribe Komponente löst keine Re-Renders auf Komponentenebene aus. Wann immer sich der abonnierte Wert ändert, rendert nur die form.Subscribe Komponente neu.

Die Wahl zwischen der Verwendung von useStore oder form.Subscribe reduziert sich hauptsächlich darauf, dass Sie, wenn es in der Benutzeroberfläche gerendert wird, zu form.Subscribe für seine Optimierungsvorteile greifen, und wenn Sie die Reaktivität innerhalb der Logik benötigen, dann ist useStore die richtige Wahl.