Ich schreibe eine komplexe App und benutze Cortex als mein zentrales Modell. Die Philosophie mit Cortex ist, dass es Ihre Daten umhüllt und die Daten verändert, ruft eine komplette Neu-Render von der Wurzel. Dies funktioniert besonders, wenn Sie nicht hierarchische Ansichten haben, die den Status ändern und sich gegenseitig beeinflussen.
Das Problem, dem ich gegenüberstehe, besteht darin, Zustände / Requisiten beim Rendern beizubehalten. Zum Beispiel habe ich eine bestimmte Hierarchie, die so lautet:
%Vor% Die EditorCard benötigt die JavaScript-Instanz von Editor , um Änderungen an der Editor beim Klicken auf PublishButton vorzunehmen (Ich verwende eine externe Bibliothek innerhalb von Editor , die Methoden zur Bearbeitung verfügbar macht). Daher setzt die Editor auf ComponentDidMount die Instanz als prop auf der EditorCard , indem sie eine Funktion aufruft, die an sie übergeben wurde.
Mein Problem ist, dass wenn ich auf PublishButton klicke, ich den Wert des Cortex-Objekts ändere, was zu einem erneuten Rendering vom Stamm führt und die Props für Editor verlieren (da die Komponente bereits eingehängt ist ComponentDidMount wird nicht erneut aufgerufen).
Die Art und Weise, wie ich mich um dieses Problem gekümmert habe, ist das Zwischenspeichern von getDefaultProps .
Innerhalb von EditorCard sind meine Standardrequisiten:
Und speichert die Editorinstanz als this.props.cachedData.editor = editorInstance
Dies speichert Requisiten über mehrere Rendern.
Soll getDefaultProps caching verwendet werden? Wenn ich Requisiten über mehrere Re-Render-Objekte spare, bremse ich mit diesem Hack einige der Kernreaktionsregeln? Könnten Sie eine bessere Struktur vorschlagen?
Nein, getDefaultProps ist, was es bedeutet zu sein: die Standard-Requisiten zu bekommen, falls der Besitzer diese nicht an Sie weitergegeben hat. Man könnte sagen, es ist eine Abkürzung für a = this.props.bla || 'hello'; .
Wenn ich Ihre Frage richtig verstehe, sehe ich drei Möglichkeiten, es zu lösen.
Speichern Sie das stattdessen in Ihrem Status. Requisiten werden vom Elternteil weitergegeben und sollen im Inneren des Kindes gelesen werden, zumindest in Vanille React.
Anstatt diese Requisite Logik in componentDidMount zu setzen, warum nicht in componentDidUpdate einfügen?
ref können Sie die Instanz abrufen und ihre Methoden aufrufen direkt.
Tags und Links javascript reactjs react-jsx