Wann imperative und deklarative APIs eingesetzt werden

React fördert einen deklarativen Stil: Sie beschreiben, wie die Benutzeroberfläche für einen bestimmten Zustand aussehen soll, und React gleicht das DOM entsprechend ab. Das meiste Verhalten läuft über Props und Zustand statt über direkte DOM-Befehle.

Dieses Modell macht Benutzeroberflächen vorhersehbar, da die gerenderte Ausgabe eine reine Funktion des Zustands ist und nicht das Ergebnis einer Folge manueller Mutationen.

Manche Interaktionen lassen sich nicht rein deklarativ ausdrücken. Ein Element imperativ zu fokussieren, eine Animation zu einem exakt bestimmten Zeitpunkt auszulösen oder ein DOM-Widget eines Drittanbieters zu steuern, lässt sich oft nicht sauber als Funktion des Zustands darstellen.

Für solche Fälle bietet React Escape Hatches wie Refs und imperative Handles, die sparsam eingesetzt werden sollten, wenn deklarative Props nicht ausreichen.

Imperative APIs bringen Nachteile mit sich. Sie sind schwieriger zu testen, da Sie Methoden aufrufen und Seiteneffekte beobachten müssen. Außerdem können sie den unidirektionalen Datenfluss durchbrechen, der React-Apps leicht nachvollziehbar macht.

Imperative Aufrufe verteilen das Verhalten außerdem häufig über Event-Handler, statt es in einer klaren Abbildung von Zustand auf Benutzeroberfläche zu bündeln. Das erhöht den Wartungsaufwand.

Bevorzugen Sie deklarative APIs und greifen Sie nur für Interaktionen und Messungen auf imperative APIs zurück: Fokus, Scrollen, Animationen, Medienwiedergabe sowie das Auslesen von Größen oder Positionen.

Wenn sich etwas als Zustand modellieren lässt, der auf eine gerenderte Ausgabe abgebildet wird, tun Sie das. Handelt es sich dagegen um eine einmalige Aktion ohne saubere Zustandsdarstellung, ist ein imperatives Handle angemessen.

Ein deklaratives Modal wird anhand einer isOpen-Prop gerendert, die von der übergeordneten Komponente verwaltet wird. Die Sichtbarkeit wird also durch den Zustand gesteuert. Ein imperatives Modal stellt die Methoden open und close bereit und verbirgt seinen eigenen Zustand hinter einem Handle.

Die deklarative Variante passt besser zum Datenfluss von React und wird normalerweise bevorzugt. Die imperative Variante kann jedoch praktisch sein, wenn das Auslösen aus verstreutem, ereignisgesteuertem Code erfolgen muss.

Sie können ein Formular deklarativ zurücksetzen, indem Sie seine key-Prop ändern. Dadurch wird React gezwungen, es mit dem Standardzustand neu zu mounten. Ein imperativer Aufruf ist nicht erforderlich.

Die imperative Alternative stellt eine reset-Methode auf einem Handle bereit. Der Trick mit der key-Prop ist oft sauberer, weil er sich auf den React-Abgleich statt auf das manuelle Löschen von Zuständen stützt.

Der Next.js-Router stellt imperative Methoden wie push, replace und prefetch bereit. Eine Route vor einer wahrscheinlichen Navigation vorab zu laden, ist eine Aktion und kein Teil des Renderzustands. Daher passt ein imperativer Aufruf hier natürlich.

Das zeigt, dass selbst idiomatische React-Werkzeuge imperative APIs verwenden, wenn es sich bei der Operation grundsätzlich um eine zu einem bestimmten Zeitpunkt ausgelöste Aktion handelt.

Die offizielle Empfehlung versteht Refs und imperative Handles als Escape Hatches – als Werkzeuge, mit denen Sie das deklarative Modell verlassen, wenn dies wirklich notwendig ist. Sie sind nicht die Standardmethode, um Features zu entwickeln.

Diese Einstellung verhindert eine übermäßige Verwendung: Greifen Sie erst dann zu einer Escape Hatch, wenn Sie bestätigt haben, dass sich das Verhalten mit Props und Zustand nicht sauber ausdrücken lässt.

Fragen Sie sich vor dem Hinzufügen eines imperativen Handles: Lässt sich das als Zustand modellieren, der auf eine Benutzeroberfläche abgebildet wird? Wenn ja, bleiben Sie deklarativ. Geht es um Fokus, Scrollen, eine Messung, eine Animation oder eine Aktion eines Drittanbieters? Dann kann eine imperative Lösung gerechtfertigt sein.

Stellen Sie außerdem sicher, dass die Oberfläche klein und dokumentiert ist und dass Sie keine Ref lediglich dazu verwenden, Daten zu übergeben, die auch eine Prop übertragen könnte.

Reale Anwendungen kombinieren beide Ansätze. Der weitaus größte Teil der Logik bleibt deklarativ, ergänzt durch eine dünne Schicht imperativer Handles für die wenigen Interaktionen, die sie benötigen.

Dieses Gleichgewicht hält Ihren Code vorhersehbar und testbar und ermöglicht Ihnen dennoch die Verwaltung von Fokus, Mediensteuerung und Bibliotheksintegrationen, wo deklarativer Code nicht ausreicht.

Entscheiden Sie, wann eine imperative API das richtige Werkzeug ist.

React verwendet standardmäßig eine deklarative Benutzeroberfläche, die von Props und Zustand gesteuert wird und dadurch vorhersehbar und testbar ist. Imperative Handles dienen als Escape Hatches für Fokus, Scrollen, Animationen, Messungen und die Steuerung von DOM-Elementen von Drittanbietern.

Vergleichen Sie deklarative und imperative Modals, bevorzugen Sie die key-Prop zum Zurücksetzen von Formularen und denken Sie daran, dass auch der Next.js-Router imperative Methoden für Aktionen verwendet. Halten Sie die imperative Schicht klein, dokumentiert und gut begründet.