Ausgabe
Wie gehen Menschen normalerweise mit “globalen” Daten in einer React-Anwendung um?
Angenommen, ich habe die folgenden Daten für einen Benutzer, sobald er in meiner App angemeldet ist.
user: {
email: '[email protected]',
name: 'John Doe'
}
Dies sind Daten, über die fast jede Komponente in meiner App gerne Bescheid wissen möchte – sie könnte also entweder in einem angemeldeten oder abgemeldeten Zustand dargestellt werden oder vielleicht die E-Mail-Adresse des Benutzers anzeigen, wenn er angemeldet ist.
Nach meinem Verständnis besteht die React-Methode für den Zugriff auf diese Daten in einer untergeordneten Komponente darin, dass eine Komponente der obersten Ebene die Daten besitzt und sie mithilfe von Eigenschaften an untergeordnete Komponenten weitergibt, zum Beispiel:
<App>
<Page1/>
<Page2>
<Widget1/>
<Widget2 user={user}/>
</Page2>
</App>
Aber das erscheint mir unhandlich, da dies bedeuten würde, dass ich die Daten durch jede Zusammensetzung leiten müsste, nur um sie dem Kind zu geben, das sie benötigt.
Gibt es eine React-Methode, um diese Art von Daten zu verwalten?
Hinweis: Dieses Beispiel ist sehr vereinfacht – ich verpacke Intents gerne als Composites, sodass Implementierungsdetails ganzer UI-Features nach Belieben drastisch geändert werden können.
BEARBEITEN : Mir ist bewusst, dass das Aufrufen setStatemeiner Komponente der obersten Ebene standardmäßig dazu führen würde, dass alle untergeordneten Komponenten erneut gerendert werden, und dass ich in jeder untergeordneten Komponente mit beliebigen Daten rendern kann (z. B. globale Daten, nicht nur Zustand oder Requisiten). Aber wie entscheiden sich die Leute dafür, nur bestimmte untergeordnete Komponenten zu benachrichtigen, dass sie gerendert werden sollen?
Lösung
Da ich diese Frage ursprünglich beantwortet habe, ist mir klar geworden, dass React selbst keine “globalen” Daten in irgendeiner Weise unterstützt – es ist wirklich dazu gedacht, die Benutzeroberfläche zu verwalten, und das war’s. Die Daten Ihrer App müssen woanders wohnen. Allerdings unterstützt es jetzt den Zugriff auf globale contextDaten, wie in dieser anderen Antwort auf dieser Seite beschrieben . Hier ist ein guter Artikel von Kent Dodds darüber, wie sich die contextAPI entwickelt hat und jetzt offiziell in React unterstützt wird.
Der contextAnsatz sollte nur für wirklich globale Daten verwendet werden. Wenn Ihre Daten in eine andere Kategorie fallen, sollten Sie wie folgt vorgehen:
- Facebook selbst löst dieses Problem mit seiner eigenen Flux- Bibliothek.
- Mobx und Redux ähneln Flux, scheinen aber populärer zu sein. Sie tun dasselbe, aber auf eine sauberere, intuitivere Weise.
Ich überlasse meine ursprünglichen Änderungen dieser Antwort unten für etwas Geschichte.
ALTE ANTWORT:
Die beste Antwort, die ich bisher dafür gefunden habe, sind diese 2 React-Mixins, die ich nicht ausprobieren konnte, aber sie klingen so, als würden sie dieses Problem lösen:
https://github.com/dustingetz/react-cursor
und diese ähnliche Bibliothek:
https://github.com/mquan/cortex
WICHTIGER HINWEIS: Ich denke, dies ist ein Job für Facebooks Flux oder etwas Ähnliches (was die oben genannten sind). Wenn der Datenfluss zu komplex wird, ist ein anderer Mechanismus erforderlich, um zwischen anderen Komponenten als Callbacks zu kommunizieren, und Flux und seine Klone scheinen es zu sein ….
Beantwortet von – Brad Parks
Antwort geprüft von – Mary Flores (FixError Volunteer)
