Wenn zwei Komponenten denselben State gemeinsam nutzen müssen, verschiebst du ("fährst") den State hoch zum nächstgelegenen gemeinsamen Vorfahren und reichst ihn über Props nach unten weiter, sodass es eine einzige Quelle der Wahrheit gibt.
() {
[query, setQuery] = ();
(
);
}
Wenn jede untergeordnete Komponente ihr eigenes query behalten würde, würden sie out-of-sync gehen. State hochzufahren bedeutet, dass Eingabe und Ergebnisse immer übereinstimmen.
State hochzufahren kann dich zwingen, Props durch viele Zwischenkomponenten zu leiten, die sie nicht verwenden:
<App user={user}>
<Layout user={user}> {/* just forwarding */}
<Sidebar user={user}> {/* just forwarding */}
<Avatar user={user} /> {/* finally used here */}
children, damit Daten dort bleiben, wo sie genutzt werden, statt sie durch viele Komponenten zu leiten.Leitendes Prinzip: Fahre State nur so hoch hoch, wie nötig — nicht höher. Zu viel Hochfahren verursacht breite Re-Renders und Prop Drilling; zu wenig Hochfahren verursacht unsynchronisierte Duplikate.