React: Wie Accordion Entry erweiterte Remount

Question

Ich habe eine Akkordeon-Stil <EndpointList /> Komponente bestehend aus mehreren <Endpoint /> Komponenten. Jeder <Endpoint /> hat einen Parameterabschnitt, der anfänglich ausgeblendet ist und der erweitert wird, wenn der Benutzer auf den Header dieses Endpunkts klickt.

Mein Ziel ist, dass wenn ein <Endpoint /> erweitert wird und der Benutzer zu einer anderen Ansicht navigiert und dann zu der Ansicht zurückkehrt, die die Liste der Endpunkte enthält, sollte die vorher erweiterte <Endpoint /> erweitert werden. Das heißt, sein Parameterabschnitt sollte immer noch sichtbar sein, selbst wenn die gesamte <EndpointList /> nicht eingehängt und zwischenzeitlich neu montiert wurde.

Jeder Endpunkt verfügt über ein boolesches expanded Flag, das angibt, ob seine Parameter derzeit erweitert sind oder nicht. Ich habe mein Ziel erreicht, indem ich diese Flags aus den Komponenten <Endpoint /> und <EndpointList /> in meine Top-Level-Komponente verschoben habe, die nie neu eingehängt wird. Dies führt jedoch die folgenden neuen Probleme:

1. Wenn ich richtig reagieren zu verstehen, wird die ganzen <EndpointList /> jetzt neu gerendert, wenn ein Endpunkt expandiert oder kollabiert, da dies meine Top-Level-Komponente Zustand ändert, die nach unten zu übergeben die <EndpointList />. Richtig? (Beim Erweitern von Endpunkten in einer Liste, die viele davon enthält, tritt eine merkbare Verzögerung auf.)
2. Ein einzelner Endpunkt ist möglicherweise in mehreren <EndpointList /> Komponenten in meiner gesamten Anwendung enthalten. Wenn ein Endpunkt erweitert wird, wird er bei der aktuellen Vorgehensweise überall dort erweitert, wo er in der Anwendung auftritt, nicht nur in der <EndpointList /> Instanz, in der der Header tatsächlich angeklickt wurde. Ich will dieses Verhalten natürlich nicht.

Also meine Fragen sind:

• Was ein guter Weg ist ein Endpunkt des expanded Zustand zu halten und nicht zu verlieren, wenn die Komponente den Endpunkt anzeigt wieder montiert wird?

• Wenn ich den expanded -Status in der Komponentenhierarchie (wie ich) in die beste (oder einzige) Weise umsetze, wie kann ich die oben beschriebenen Probleme beheben?

Vielen Dank im Voraus!

---

Update: habe ich ein JSFiddle um das Problem zu veranschaulichen: https://jsfiddle.net/7shLogek/2. Sie können tatsächlich in Ihrer Browserkonsole sehen, dass jede Endpunktliste immer neu gerendert wird, wenn ein Endpunkt erweitert oder reduziert wird. Außerdem sind die Endpunkte in beiden Listen zur gleichen Zeit offensichtlich immer erweitert/reduziert.

---

Update 2: ich das Leistungsproblem gelöst (1.) durch Endpoint.shouldComponentUpdate() Implementierung und Verwendung Facebook's Shallow Compare Addon so dass nur die Endpunkte, die tatsächlich geändert haben, werden neu gerendert.

Answer 1

Einige schnelle Tipps:

• 1: Wenn Sie die Remon performant genug bekommen kann leider nicht, versuchen Sie und Ausblenden der Wurzelkomponente möglichst zeigt, statt wieder montiert.
• 2: Ich stelle fest, dass Sie geben Sie den gleichen Zustand zu jedem der Listen Sie wahrscheinlich eine Sammlung von Zuständen für den EndpointList erstellen müssen (wie Sie mit this.state.endpoints haben) individuelle Verhalten haben für jede Liste.