Reaktivität bedeutet in der Webentwicklung, dass sich die Oberfläche von selbst anpasst, wenn sich die zugrunde liegenden Daten ändern. Du änderst einen Wert, und jede Stelle der Seite, die ihn anzeigt, zieht nach.
- Reaktivität
Das automatische Nachziehen der Oberfläche, sobald sich die Daten dahinter ändern.
Beispiel: „Dank der Reaktivität springt die Summe im Warenkorb sofort um, wenn jemand die Menge ändert.“Auch: Data Binding oder Datenbindung, die Verknüpfung zwischen einem Wert und seiner Anzeige. Bei der Zwei-Wege-Bindung wirkt sie in beide Richtungen, und eine Eingabe im Formularfeld ändert auch den Wert.
Verwandt: State, die Daten, auf die sich die Reaktivität bezieht.
Warum Reaktivität die Frontend-Entwicklung verändert hat
Vorher musste jede Änderung von Hand in die Seite geschrieben werden: Wert ändern, passendes Element suchen, Text austauschen, und das an jeder Stelle, an der der Wert vorkommt. Mit jQuery war das Alltag und eine häufige Fehlerquelle.
Mit Reaktivität beschreibst du nur noch, wie die Oberfläche bei bestimmten Daten aussehen soll. Den Abgleich übernimmt das Framework.
Wie Frameworks Reaktivität umsetzen
React zeichnet eine Komponente bei jeder Änderung neu und gleicht das Ergebnis mit dem vorherigen ab. Vue.js beobachtet die Daten und weiß, welche Stellen von welchem Wert abhängen. Svelte schreibt den Code für jede Änderung schon beim Bauen aus.
Seit einigen Jahren setzen viele Frameworks auf sogenannte Signals, kleine Behälter für einen Wert, die ihre Abhängigen direkt benachrichtigen. Angular, Solid und Preact arbeiten inzwischen damit, Svelte mit einer eigenen Spielart.
Reaktivität ohne großes Framework
Auch ohne Bauschritt geht es: Alpine.js bringt Reaktivität über Attribute ins HTML. Ein Wert in x-data und ein x-text an anderer Stelle genügen, damit die Anzeige jeder Änderung folgt.
Für die vielen kleinen Interaktionen einer gewöhnlichen Website reicht das in aller Regel.