Atoms: Die Einheit des Zustands in Jotai

In Jotai wird der State in Atome aufgeteilt: kleine, unabhängige Teile reaktiven States. Jedes Atom enthält einen einzelnen Wert und wird außerhalb von Komponenten mit atom(initialValue) erstellt.

Das entspricht dem Denkmodell, den State in die kleinsten sinnvollen Einheiten aufzuteilen, statt ein einziges großes Store-Objekt zu verwenden.

Wenn sich der Wert eines Atoms ändert, werden nur die Komponenten neu gerendert, die dieses bestimmte Atom abonniert haben. Komponenten, die andere Atome lesen, sind nicht betroffen.

Diese feingranulare Reaktivität ist Jotais zentraler Vorteil gegenüber React Context, bei dem sich bei jeder Änderung alle Consumer neu rendern.

Definieren Sie Atome auf Modulebene: const countAtom = atom(0). Dadurch bleibt die Identität des Atoms über mehrere Render-Vorgänge hinweg stabil und das Atom wird beim Mounten jeder Komponente nicht neu erstellt.

Atome sind leichtgewichtige Referenzen; sie enthalten keinen eigenen Wert. Der Wert liegt im Jotai-Store.

Standardmäßig verwendet Jotai einen impliziten globalen Store. Sie müssen Ihre App nicht in einen Provider einschließen, um Atome zu verwenden; dadurch ist die Einführung in bestehenden Projekten einfach.

Atome sind von jeder Komponente im Baum global zugänglich, ohne Props weiterreichen oder Context durchreichen zu müssen.

Wenn Sie mehrere unabhängige Instanzen desselben Komponentenbaums benötigen (z. B. zwei separate Formulare, jeweils mit eigenen Formular-State-Atomen), umschließen Sie jedes mit einem Jotai Provider. Jeder Provider erstellt einen isolierten Store.

Dies ist für Micro-Frontend-Architekturen oder komplexe Seitenlayouts mit unabhängigen State-Bereichen nützlich.

Der globale Store bewahrt Atome für die Lebensdauer der Anwendung auf. Ein bereichsbezogener Provider-Store wird zurückgesetzt, wenn der Provider unmountet, und eignet sich daher perfekt für Modaldialoge oder seitenbezogenen State, der nicht global bestehen bleiben soll.

Sie können Provider sogar eine benutzerdefinierte Store-Instanz übergeben, um die Isolation beim serverseitigen Rendern zu gewährleisten.

Zustand verwendet ein einzelnes Store-Objekt mit Selektoren, um unnötige erneute Render-Vorgänge zu vermeiden. Jotai teilt State in Atome auf, und jede Komponente abonniert nur die Atome, die sie liest.

Jotai eignet sich besonders für feingranularen UI-State (einzelne Eingabewerte, Toggle-Flags). Zustand passt gut zu größerem, miteinander verknüpftem Anwendungs-State.

React Context rendert bei jeder Änderung des Context-Werts jede Consumer-Komponente neu, selbst wenn die konsumierende Komponente nur ein Feld im Context-Objekt benötigt.

Jotai löst dieses Problem: Eine Komponente, die useAtom(nameAtom) verwendet, wird nur neu gerendert, wenn sich nameAtom ändert, nicht wenn sich ein anderes Atom ändert.

Jotai verwendet standardmäßig den Vergleich Object.is, um zu bestimmen, ob sich der Wert eines Atoms geändert hat. Wenn Sie ein Atom auf denselben Wert setzen, den es bereits enthält, wird kein erneutes Rendern ausgelöst.

Verwenden Sie bei komplexen Objekten das Dienstprogramm selectAtom, um aus einem großen Atom einen stabilen primitiven Wert abzuleiten und erneute Render-Vorgänge bei Änderungen nicht zusammenhängender Felder zu verhindern.

useState ist auf eine einzelne Komponente beschränkt. Atome werden im gesamten Komponentenbaum gemeinsam genutzt, ohne sie explizit weitergeben zu müssen. Wenn zwei Geschwisterkomponenten dasselbe Atom lesen, bleiben sie automatisch synchron.

Dadurch entfällt das Hochheben des States für die gemeinsame Nutzung zwischen Komponenten, während die Anzahl erneuter Render-Vorgänge gering bleibt.

Typische Atome sind: const themeAtom = atom('light'), const cartItemsAtom = atom([]), const selectedUserIdAtom = atom(null). Diese werden einmal definiert und überall in der Anwendung importiert.

Jedes Atom ist unabhängig: Das Aktualisieren von cartItemsAtom löst in Komponenten, die nur themeAtom lesen, keine erneuten Render-Vorgänge aus.

Wie unterscheidet sich Jotai beim erneuten Rendern von React Context?

Atome sind die grundlegende Einheit des Zustands in Jotai. Sie werden außerhalb von Komponenten mit atom(initialValue) erstellt und standardmäßig ohne Provider im gesamten Komponentenbaum gemeinsam genutzt. Wenn sich ein Atom ändert, werden nur seine Abonnenten erneut gerendert.

Diese feingranulare Reaktivität ist Jotais entscheidender Vorteil gegenüber React Context. Das Abonnementmodell pro Atom unterscheidet sich vom Single-Store-Ansatz von Zustand.