0Pricing
React Academy · Lektion

Den richtigen Speicherort für State wählen

Wenden Sie ein Entscheidungsmodell an: lokaler State, angehobener State oder globaler State.

Den richtigen Speicherort für State wählen ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Willkommen

In dieser Lektion lernen Sie einen praktischen Entscheidungsrahmen kennen, mit dem Sie bestimmen, ob der Zustand in einer einzelnen Komponente, einem gemeinsamen Vorfahren, React Context oder einer globalen State-Bibliothek liegen sollte.

Schritt 1: Wer verwendet diesen Zustand?

Fragen Sie zuerst: Welche Komponenten werden anhand dieses Zustands gerendert? Listen Sie sie auf. Wenn nur eine Komponente ihn verwendet, behalten Sie den Zustand lokal in dieser Komponente.

Lokaler Zustand

Zustand, der von genau einer Komponente verwendet wird, wird mit useState in dieser Komponente verwaltet. Beispiele: ob ein Dropdown geöffnet ist, der aktuelle Wert eines kontrollierten Eingabefelds oder ob ein Tooltip sichtbar ist.
function Toggle() {
  const [on, setOn] = useState(false);
  return <button onClick={() => setOn(!on)}>{on ? 'On' : 'Off'}</button>;
}

Schritt 2: Den gemeinsamen Vorfahren finden

Wenn mehrere Komponenten den Zustand benötigen, suchen Sie ihren nächsten gemeinsamen Vorfahren im Komponentenbaum. Verschieben Sie den Zustand dorthin und reichen Sie ihn als Props weiter.

Nach oben gehobener Zustand (2–3 Ebenen)

Zustand, der von 2–3 Komponenten auf derselben Verschachtelungsebene gemeinsam genutzt wird, eignet sich gut zum Hochheben. Die gemeinsame übergeordnete Komponente verwaltet ihn und reicht ihn über Props weiter.

Schritt 3: Ist das Prop-Drilling zu tief?

Wenn der gemeinsame Vorfahr 4 oder mehr Ebenen über den nutzenden Komponenten liegt, erzeugt das Durchreichen von Props durch Zwischenkomponenten unnötiges Rauschen. Ziehen Sie Context in Betracht.

Context-Zustand

Verwenden Sie Context für Querschnittsthemen, die viele Komponenten im Baum benötigen: den aktuell authentifizierten Benutzer, das aktive Theme oder die ausgewählte Locale. Diese ändern sich selten und haben viele Verbraucher.

Schritt 4: Ist der Zustand komplex oder wird er über Seiten hinweg geteilt?

Wenn der Zustand eine komplexe Aktualisierungslogik hat, Undo/Redo benötigt, die Navigation überdauern muss oder in vollständig getrennten Komponentenbäumen verwendet wird, nutzen Sie eine dedizierte State-Bibliothek (Zustand, Redux).

Serverzustand ist etwas anderes

Vom Server abgerufene Daten sind *Serverzustand*, nicht UI-Zustand. Speichern Sie sie nicht in useState oder einem globalen Store, sondern verwenden Sie React Query, SWR oder RTK Query. Diese Lösungen übernehmen Caching, erneutes Abrufen und Fehlerzustände automatisch.

Der Entscheidungsablauf

1 Verbraucher → lokaler useState. 2–3 Verbraucher auf ähnlicher Ebene → in die übergeordnete Komponente hochheben. 4 oder mehr Ebenen Prop-Drilling → Context. Komplexe Logik oder mehrere Komponentenbäume → Zustand/Redux. Serverdaten → React Query/SWR.

Kurzer Test

Welcher Ort für den Zustand eignet sich am besten für den aktuell authentifizierten Benutzer, auf den viele Komponenten in einer großen App zugreifen müssen?

Zusammenfassung

Ordnen Sie den Ort des Zustands den Verbrauchern zu: lokal für eine Komponente, nach oben gehoben für wenige nahe Komponenten, Context für viele Komponenten über mehrere Ebenen hinweg, eine State-Bibliothek für komplexen Zustand oder Zustand über mehrere Komponentenbäume hinweg, React Query für Serverdaten.

Kurs abgeschlossen

Herzlichen Glückwunsch! Sie haben **State nach oben heben und Lösungen für Prop-Drilling** abgeschlossen. Sie verfügen nun über einen klaren Rahmen dafür, wo Zustand verwaltet und wie er korrekt geteilt wird.

Häufig gestellte Fragen

Ist die Lektion „Den richtigen Speicherort für State wählen“ kostenlos?

Ja — der vollständige Text von „Den richtigen Speicherort für State wählen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Den richtigen Speicherort für State wählen“?

Wenden Sie ein Entscheidungsmodell an: lokaler State, angehobener State oder globaler State. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Academy zu starten?

Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Den richtigen Speicherort für State wählen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. State nach oben heben: Prinzipien und Beispiele
  2. Prop Drilling: Wann es schadet und wann es in Ordnung ist
  3. Muster für die Kommunikation zwischen Geschwisterkomponenten
  4. Den richtigen Speicherort für State wählen
← Zurück zu React Academy