ReactJS: Warum ist das Übergeben des Komponenten-Anfangszustands als Requisite ein Anti-Muster?

Ich habe mit Hilfe von SocketIO ein kleines ReactJS-Dashboard für Live-Updates erstellt. Obwohl das Dashboard aktualisiert wird, stört es mich, dass ich nicht ganz sicher bin, ob ich es richtig gemacht habe.

Was mich am meisten nervt, sind die Requisiten in getInitialState als Anti-Pattern- Post. Ich habe ein Dashboard erstellt, das Live-Updates von einem Server erhält und keine Benutzerinteraktion erfordert, außer das Laden der Seite. Nach dem, was ich gelesen habe, this.statesollte es Dinge enthalten, die bestimmen, ob die Komponente neu gerendert werden soll, und this.props... ich weiß es noch nicht.

Wenn Sie jedoch zum ersten Mal anrufen React.render(<MyComponent />, ...), können Sie nur Requisiten übergeben. In meinem Fall erhalte ich alle Daten vom Server, sodass die ersten Requisiten this.statesowieso landen . Alle meine Komponenten haben also ungefähr so:

getInitialState: function() {
    return {
        progress: this.props.progress,
        latest_update: this.props.latest_update,
        nearest_center: this.props.nearest_center
    }
}

Was, sofern ich den oben genannten Blog-Beitrag nicht falsch interpretiert habe, ein Anti-Muster ist. Aber ich sehe keine andere Möglichkeit, den Status in die Komponente einzufügen, und ich verstehe nicht, warum es sich um ein Anti-Pattern handelt, es sei denn, ich beschrifte alle meine Requisiten neu, initialum ihnen vorangestellt zu werden. Wenn überhaupt, denke ich, dass dies ein Anti-Muster ist, weil ich jetzt mehr Variablen im Auge behalten muss als zuvor (die mit initialund ohne).

Haftungsausschluss : Als ich diese Frage beantwortete, lernte ich Vanilla Flux zu implementieren und war etwas skeptisch. Später habe ich alles auf Redux migriert. Also ein Rat: Gehen Sie einfach mit Redux oder MobX. Wahrscheinlich brauchen Sie nicht einmal mehr die Antwort auf diese Frage (außer für die Wissenschaft).

Das Übergeben des Anfangszustands an eine Komponente als propist ein Anti-Pattern, da die getInitialStateMethode nur beim ersten Rendern der Komponente aufgerufen wird. Das heißt, wenn Sie diese Komponente erneut rendern und einen anderen Wert als übergeben prop, reagiert die Komponente nicht entsprechend, da die Komponente den Status vom ersten Rendern an beibehält. Es ist sehr fehleranfällig.

Und hier ist, was Sie tun sollten:

Versuchen Sie, Ihre Komponenten so zustandslos wie möglich zu machen. Zustandslose Komponenten sind einfacher zu testen, da sie eine Ausgabe basierend auf einer Eingabe rendern . So einfach ist das.

Aber hey ... meine Komponentendaten ändern sich ... ich kann sie nicht zustandslos machen

Ja, das können Sie für die meisten. Wählen Sie dazu eine äußere Komponente als Staatsinhaber aus. Anhand Ihres Beispiels können Sie eine DashboardKomponente erstellen , die die Daten enthält, und eine WidgetKomponente, die vollständig zustandslos ist. Der Dashboardist dafür verantwortlich, alle Daten abzurufen und dann mehrere zu rendern Widgets, die alles erhalten, was sie benötigen props.

Aber meine Widgets haben einen Status. Der Benutzer kann sie konfigurieren. Wie mache ich sie staatenlos?

Sie Widgetkönnen Ereignisse verfügbar machen Dashboard, die Widgetbei der Behandlung dazu führen, dass sich der darin enthaltene Status ändert und alle erneut gerendert werden. Sie erstellen "Ereignisse" in Ihrem, Widgetindem Sie propsdiese eine Funktion erhalten lassen.

Ok, jetzt behält Dashboard den Status bei, aber wie übergebe ich den Anfangsstatus?

Sie haben zwei Möglichkeiten. Am empfehlenswertesten ist, dass Sie in der Dashboard getInitialStateMethode einen Ajax-Aufruf ausführen, um den Anfangsstatus vom Server abzurufen. Sie können auch Flux verwenden , eine komplexere Methode zum Verwalten von Daten. Flux ist eher ein Muster als eine Implementierung. Sie können reinen Flux mit der Facebook-Implementierung von verwenden Dispatcher, aber Sie können Implementierungen von Drittanbietern wie Redux , Alt oder Fluxxor verwenden .

Alternativ können Sie diesen Anfangszustand als propan übergeben Dashboardund explizit deklarieren, dass dies nur der Anfangszustand ist. Wie initialDatazum Beispiel. Wenn Sie diesen Pfad wählen, können Sie ihm später keinen anderen Anfangszustand übergeben, da er sich den Zustand nach dem ersten Rendern "merkt".

OBS

Sie sind in Ihren Definitionen nicht ganz richtig.

Der Status wird verwendet, um veränderbare Daten zu speichern, dh Daten, die sich während des Komponentenlebenszyklus ändern werden. Änderungen im Status sollten über die setStateMethode vorgenommen werden und führen dazu, dass die Komponente erneut gerendert wird.

Requisiten werden verwendet, um unveränderliche Daten an die Komponenten weiterzugeben. Sie sollten sich während des Komponentenlebenszyklus nicht ändern. Komponenten, die nur Requisiten verwenden, sind zustandslos.

Dies ist eine relevante Quelle zum Thema "Übergeben des Anfangszustands an Komponenten".