Zusammenfassung

In dieser Lektion hast du gelernt:

• State ist ein Wert, den React für eine Komponente zwischen den Rendervorgängen aufbewahrt: const [likes, setLikes] = useState(0);, mit import { useState } from "react";. Eine gewöhnliche Variable beginnt bei jedem Rendern neu, und sie zu ändern ändert die Seite nicht.
• Der Aufruf des Setters bringt React dazu, die Komponente mit dem neuen Wert erneut zu rendern und die Seite anzupassen. Die Seite änderst du nie selbst, und State änderst du nur mit seinem Setter.
• Eine Komponente kann mehrere State-Variablen haben, beliebiger Art: Zahlen, Text, Wahrheitswerte (setOffen((offen) => !offen) zum Ein- und Ausblenden), Arrays und Objekte. Was sich aus State berechnen lässt, berechnest du beim Rendern.
• Jede Stelle, an der eine Komponente verwendet wird, hat ihren eigenen State: drei BandKarte-Komponenten, drei Zähler.
• Der neue Wert kommt mit dem nächsten Rendern. Im Handler hat die State-Variable noch den alten. Brauchst du den neuen, berechne ihn zuerst in einer Konstante.
• Wird der neue Wert aus dem alten berechnet, gib dem Setter eine Updater-Funktion: setLikes((likes) => likes + 1). React ruft die Funktionen aus der Warteschlange der Reihe nach auf, jede mit dem aktuellsten Wert.
• Ändere State nie an Ort und Stelle. Erzeuge ein neues Array oder Objekt: Hinzufügen mit Spread ([...zeitplan, id]), Entfernen mit filter(), einen Eintrag ändern mit map() und { ...lied, gespielt: true }, ein Objekt ändern mit { ...ticket, anzahl: 2 }. Nach push() oder ticket.anzahl = 2 ist der State derselbe Wert, und React rendert nicht.

In der nächsten Lektion, Formulare, verbindest du Textfelder, Kontrollkästchen und Auswahllisten mit State und fügst über ein Formular neue Einträge zu einer Liste hinzu.

Vorher aber noch eine kleine Übung: eine Abstimmung über die Band des Festivals.