Sub-Komponente nicht korrekt in React + Flux-Architektur

Question

Ich denke, ich verwende nicht so, wie ich soll.

Ich versuche, die Dinge so viel wie möglich zu vereinfachen, also beschreibe ich kurz das Problem, die Lösungen, die ich gefunden habe und was ich an ihnen nicht mag.

Problem Ich habe einige Flüsse in meiner App. Stellen Sie sich eine mehrstufige Übung vor, in der jeder Schritt eine Liste mit Karten enthält. Die Karten und andere Daten von einem Schritt zum anderen sind unterschiedlich, also grundsätzlich auf jedem Schritt habe ich die gleiche Komponente, aber mit anderen Daten. Jeder Schritt erhält eine cardsObject in getDefaultProps. In getInitialState wandle ich es in ein Array um es einfacher zu machen. Wenn Sie eine neue Karte hinzufügen, sendet die die neuen Daten an die Store. Es sendet eine Änderung, die View Updates, es übergibt die neuen Karten als props, aber sie nicht wieder in den Zustand bekommen, so dass die Komponente mit den gleichen Karten neu rendert.

ein Diagramm zum besseren Verständnis Anbringen (die linken und rechten Spalten die gleiche Gruppe von Komponenten sind. Ich habe separat setzt sie nur die Strömung besser zu verstehen)

Lösungen Ich habe gefunden

1. Die ersten Dinge, die in den Sinn kamen, ist, dass die Komponente nicht ordnungsgemäß aktualisiert wird. Also habe ich einen key dafür gesetzt, einen eindeutigen Schlüssel jedes Mal erzeugend. Dies bedeutet, dass beim Passieren von 4 Karten es wieder in die getDefaultProps und getInitialState geht und die Komponenten richtig rendert.

Die großen Nachteil von diesem ist, dass es alle Komponente (die Liste der Karten von ihm, die verschiedenen Texte, die es hat) wieder rendert. Ich hoffte, dass es es nur im Gedächtnis wiedergibt, aber es gibt auch das DOM wieder. Es ist also nicht performant. Ich lösche grundsätzlich alles und erstelle es bei jedem Update neu.

2. Eine andere Lösung bestand darin, für jeden Schritt den gleichen Schlüssel zu generieren (Schritt 1 erhält Schlüssel 1 usw.). Um die neuen Karten zu bekommen, musste ich getInitialState loswerden und in render mit den Karten direkt von props arbeiten. Dies ist der Nachteil dieser Methode. Es bedeutet, dass ich nicht mit Dingen aus dem Staat arbeiten kann, weil nur die Requisiten sich ändern.

Also brauche ich eine Anleitung. Wie finden Sie die 2 Lösungen? Kann ich den Zustand bei Erhalt der neuen Requisiten irgendwie aktualisieren? ComponentWillUpdate wird ausgelöst, und ich habe die neuen Requisiten dort. Wie kann ich sie wieder in den Staat injizieren? Ich habe versucht setState in componentWillUpdate und ich habe ein nicht reagierendes Skript. Ich denke, ich brauche hier eine bessere Lösung.

Vielen Dank im Voraus. Ich habe keinen Code gepostet, da es einfach ist, nichts besonderes.

Answer 1

Ja, Sie möchten auf jeden Fall Schlüssel verwenden, und ich denke, Ihre zweite Lösung ist so, wie es funktionieren sollte.

Rendering rein von Requisiten ist eigentlich das, was Sie wollen so viel wie möglich. Converting props to state is especially to be avoided. Wenn Sie es von Requisiten ableiten können, sollten Sie es einfach in Ihrer Renderfunktion ableiten.

In einigen seltenen Fällen müssen Sie einige schwere Berechnungen durchführen, die Sie nicht bei jedem Render-Durchlauf wiederholen möchten. Nach meiner Erfahrung ist es einfach, dies vorher zu optimieren: JavaScript ist heutzutage sehr schnell. Es gibt jedoch Fälle, in denen es ein Flaschenhals sein könnte. In diesen Fällen können Sie componentWillReceiveProps verwenden, um einige Requisiten in den Zustand zu konvertieren, wenn sie sich geändert haben. Beachten Sie, dass componentWillReceiveProps does not indicate the props have actually changed values, nur, dass sie von einem übergeordneten Render übergeben wurden. Es liegt an dir zu überprüfen, ob die Requisiten sich geändert haben und deine schwere Berechnung an diesem Punkt und setState. Beachten Sie auch, dass componentWillReceivePropsnicht vor dem ersten Rendern aufgerufen wird, so dass Sie normalerweise eine Kombination aus componentWillMount und componentWillReceiveProps benötigen, die beide in eine Funktion aufrufen, die den Status berechnet. Wenn all das vermieden werden kann, indem einfach alle Daten von Requisiten abgeleitet werden, gehe stattdessen damit fort.