Wann globalen und lokalen State verwenden
Wenden Sie das Prinzip der Colocation an: Halten Sie State so nah wie möglich an seinem Consumer und heben Sie ihn nur an, wenn mehrere unabhängige Komponenten ihn benötigen.
Wann globalen und lokalen State verwenden ist eine kostenlose Frontend 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Die Frage nach dem Speicherort des Zustands
Jeder Teil des Zustands hat einen optimalen Speicherort. Die Wahl des falschen Speicherorts führt entweder zu Problemen durch Prop Drilling oder zu unnötiger Komplexität durch globalen Zustand. Das Leitprinzip lautet: Halten Sie den Zustand so nah wie möglich an den Komponenten, die ihn verwenden.
Lokaler Komponentenstatus
Wenn nur eine Komponente den Zustand verwendet, gehört er in den useState/ref dieser Komponente. Eine gemeinsame Nutzung ist nicht nötig – halten Sie ihn lokal. Dies ist der einfachste und häufigste Fall.
// Good: UI state local to the component
function Accordion() {
const [isOpen, setIsOpen] = useState(false); // only this component cares
return (
<div>
<button onClick={() => setIsOpen(o => !o)}>Toggle</button>
{isOpen && <div>Content</div>}
</div>
);
}Zustand nach oben verschieben
Wenn zwei Geschwisterkomponenten denselben Zustand benötigen, verschieben Sie ihn zu ihrem nächsten gemeinsamen Vorfahren. Übergeben Sie ihn als Props und Callbacks nach unten. Dies ist der übliche Ansatz in React/Vue, bevor Sie einen globalen Store einsetzen.
Gemeinsamer Context – Teilen auf mittlerer Ebene
Wenn der Zustand über einen Teilbaum hinweg gemeinsam genutzt werden muss, ohne Prop Drilling zu verwenden, ist Context (React) oder provide/inject (Vue) das richtige Werkzeug. Dieser Ansatz eignet sich für das Teilen mit begrenztem Umfang (eine Seite, ein Feature-Modul).
Globaler Store – anwendungsweiter Zustand
Verwenden Sie einen globalen Store (Redux, Zustand, Pinia) für Zustand, der: 1) von vielen voneinander unabhängigen Komponenten verwendet wird, 2) die Navigation überdauern muss, 3) eine komplexe Aktualisierungslogik besitzt, 4) von der Untersuchung mit DevTools profitiert.
Beispiele: Lokaler Zustand
Lokaler Zustand eignet sich für: Werte von Formularfeldern, den geöffneten oder geschlossenen Zustand eines Tooltips, die Sichtbarkeit eines Modals, den Hover-Zustand, den Animationszustand und Ladeanzeigen, die auf eine Komponente beschränkt sind.
Beispiele: Nach oben verschobener Zustand
Nach oben verschobener Zustand eignet sich für: einen gemeinsamen Filter, den zwei Geschwisterlisten verwenden, den ausgewählten Tab in einer Tab-Gruppe und Formulardaten, die von zwei Schritten gemeinsam genutzt werden.
Beispiele: Context / Provide
Context eignet sich für: das aktuelle Theme, den authentifizierten Benutzer, Locale/Sprache, Feature-Flags und eine Benachrichtigungswarteschlange – Dinge, die auf vielen Ebenen verwendet, aber nur selten aktualisiert werden.
Beispiele: Globaler Store
Ein globaler Store eignet sich für: einen Warenkorb, Authentifizierungstoken und ein Benutzerobjekt, eine Benachrichtigungswarteschlange (Nachrichten werden von überall aus in einem Toast angezeigt) sowie Echtzeitdaten, die mehrere Ansichten gleichzeitig darstellen.
Server-Zustand vs. Client-Zustand
Netzwerkdaten (von einer API abgerufen) sind eine besondere Kategorie: Server-Zustand. Sie benötigen eine Behandlung von Lade- und Fehlerzuständen, Caching und Invalidierung. React Query / SWR / TanStack Query verwalten den Server-Zustand, sodass sich Ihr Store auf den eigentlichen Client-Zustand konzentrieren kann.
Häufiger Fehler: Alles im globalen Store
Legen Sie nicht vorsichtshalber den gesamten Zustand in den globalen Store. Lokaler Zustand ist kostengünstiger, einfacher und leichter zu testen. Eine übermäßige Verwendung des globalen Zustands erzeugt Kopplungen zwischen Komponenten, die eigentlich unabhängig sein sollten.
Entscheidungsrahmen
Fragen Sie sich: 1) Benötigen andere Komponenten diesen Zustand? Nein → lokal. 2) Benötigen ihn nahe beieinanderliegende Geschwisterkomponenten? Ja → nach oben verschieben. 3) Benötigt ihn ein Teilbaum von Komponenten? Ja → Context/provide. 4) Benötigen ihn viele voneinander unabhängige Komponenten oder muss er in DevTools untersucht werden? Ja → globaler Store.
Schnelltest
Wo sollten Sie den geöffneten oder geschlossenen Zustand einer einzelnen Accordion-Komponente speichern?
Zusammenfassung: Speicherort des Zustands
Prinzip: Halten Sie den Zustand so nah wie möglich an den Komponenten, die ihn verwenden. Lokales useState/ref für den Zustand einer einzelnen Komponente. Nach oben verschieben, wenn Geschwisterkomponenten ihn gemeinsam nutzen. Context/provide für die gemeinsame Nutzung in einem Teilbaum. Globaler Store für anwendungsweiten Zustand mit komplexen Aktualisierungen. Server-Zustand (API-Daten) gehört in React Query/SWR, nicht in den globalen Store.
Häufig gestellte Fragen
Ist die Lektion „Wann globalen und lokalen State verwenden“ kostenlos?
Ja — der vollständige Text von „Wann globalen und lokalen State verwenden“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Wann globalen und lokalen State verwenden“?
Wenden Sie das Prinzip der Colocation an: Halten Sie State so nah wie möglich an seinem Consumer und heben Sie ihn nur an, wenn mehrere unabhängige Komponenten ihn benötigen. Du übst Frontend 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 Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend 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 „Wann globalen und lokalen State verwenden“?
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 Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend 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
- Redux Toolkit: createSlice und configureStore
- Zustand für schlanken React-State
- Pinia für Vue: defineStore und storeToRefs
- Wann globalen und lokalen State verwenden