Zusammenfassung
In dieser Lektion hast du gelernt, dass:
- Props nach unten gehen, von einem Parent zu seinen Kindern. Eine Komponente kann den State einer anderen Komponente nicht lesen.
- du State, den mehrere Komponenten brauchen, in ihren nächsten gemeinsamen Parent hochhebst. Gib den Wert als Props nach unten, zusammen mit einer Funktion, die ihn ändert und
beiXheißt:beiFavoritUmschalten,beiSucheAendern. - das Kind die Funktion aufruft, der Parent seinen State ändert und neu rendert und jedes Kind den neuen Wert bekommt.
- eine Setter-Funktion des States auch eine Funktion ist und unverändert nach unten gegeben werden kann:
beiSucheAendern={setSuche}. - du nicht speicherst, was du berechnen kannst. Anzahlen (
favoriten.length), Summen und gefilterte Listen werden beim Rendern aus State und Props berechnet. Ein zweiter State, der mit dem ersten übereinstimmen muss, gerät aus dem Takt. useState(x)dasxnur im ersten Render verwendet, sodass eine Liste im State, die aus anderem State entsteht, so bleibt, wie sie begonnen hat.- eine einzige Quelle der Wahrheit heißt: Jedes Datum wird an einer Stelle gespeichert, und alles andere wird daraus gelesen oder berechnet. Für Daten, die viele Ebenen nach unten müssen, hat React den Kontext.
In der nächsten Lektion, Effekte, tun deine Komponenten etwas, nachdem sie gerendert wurden: das Programm von einem Server laden, einen Timer laufen lassen und sich die Favoriten in localStorage merken.
Aber zuerst noch etwas Übung: der Zeitplan nach Tagen. Tagesauswahl wechselt zwischen Freitag und Samstag, behält den Tag aber für sich, sodass Zeitplan immer jede Band zeigt.
So schreibst du es:
"Shift + 2
{Alt Gr + 7
}Alt Gr + 0
[Alt Gr + 8
]Alt Gr + 9
<<
>Shift + <
/Shift + 7
|Alt Gr + <
&Shift + 6
`Shift + ´, Leertaste
$Shift + 4
Anweisungen
- 1
Verschiebe
tagnach oben inAppund gib ihn mit einer FunktionbeiTagWaehlenanTagesauswahl. GibZeitplannur die Bands des gewählten Tages: am Freitag Nachtzüge und Mondkatzen. - 2
Zeige über dem Zeitplan die Zahl der Bands des gewählten Tages in einem Absatz mit der Klasse
anzahl:Bands: 2.