React-window: Durch Ändern der Requisiten eines Elements wird die gesamte Liste aktualisiert

Ich habe genau den gleichen Anwendungsfall und das gleiche Problem und konnte keine Lösung finden ...

Das liegt daran, dass durch Ändern eines Elements ein neues items -Array erstellt wird, das ein neues itemData -Objekt erstellt . Es ist wichtig, dass Memoisierungstechniken ungültig werden, wenn sich ihre Daten ändern.

Wenn Sie möchten, dass die Elemente für diese Art von Änderung robuster sind, können Sie Ihre eigene areEqual -Funktion (oder shouldComponentUpdate ) implementieren.

Die Demo soll nur zeigen, wie itemData und Memoization zusammenarbeiten können, um komplexe Werte zu übergeben.

Ich hatte es mit meiner eigenen shouldComponentUpdate-Funktion getestet, aber diese Funktion wird nicht ausgeführt, wenn die Komponente immer wieder umountet wird

ob die Komponente immer wieder umgehängt wird

Es gibt keine Möglichkeit, sich eine Komponente zu merken, die nicht mehr gemountet wird. Das ist jedoch nicht das, was in meiner Demo passiert. Wenn es das ist, was in Ihrer App passiert, ist noch etwas los - und ich kann nicht darüber spekulieren, was passiert.

@ BertelBB Haben Sie eine Lösung gefunden?

@ffjanhoeck Nicht wirklich, nein. Ich habe festgestellt, dass mein Anwendungsfall tatsächlich ein bisschen anders ist, da meine Liste auch sortiert / gefiltert werden kann. Ich habe die Requisiten itemData und itemKey übergeben, damit ich die Schlüsselstütze für jeden Gegenstand manuell einstelle. Die gesamte Liste wird immer noch aktualisiert, ist aber nicht so verzögert wie zuvor.
https://react-window.now.sh/#/api/FixedSizeList hier können Sie über die Requisiten lesen, auf die ich mich beziehe.

@ BertelBB Ich habe diese Funktion bereits gestern implementiert, danke :)
Das Problem ist jedoch nicht behoben :(
Hier ist ein GIF, was verzögert ist - wie Sie sehen können, dauert es einige Millisekunden, um einen Artikel zu überprüfen.
Alles ist gespeichert oder hat ein shouldComponentUpdate implementiert.

@ffjanhoeck Ja, habe das gleiche Problem. Ich habe leider noch keine Zeit, mich näher damit zu befassen. Aber ich werde dich wissen lassen, wenn ich eine bessere Lösung finde :)

@ffjanhoeck Gibt es eine Chance, dass ich mir die App ansehen kann, die Sie oben im GIF gezeigt haben? Ich wäre neugierig, einen Profiler zu betreiben und zu sehen, woher die Langsamkeit kommt.

@bvaughn Ja sicher - ich habe Ihnen die Anmeldeinformationen in Ihrer E-Mail

Ich denke, die Langsamkeit kommt von der kurzen Vorschau eines Elements (Das Bild und der blaue Text mit dem sekundären Text repräsentieren die EntityShortPreview-Komponente). Für einen Artikel ist dies jedoch kein Problem. Das Problem ist, dass alle Elemente bei Auswahl abmontiert und gemountet werden. Wenn Sie dies zusammenfassen, ist es langsam.

Das ist mein aktuelles Gefühl: D Aber vielleicht kannst du noch ein paar andere Probleme finden :)

Dies geschieht, wenn ein Benutzer ein Element auswählt

@ffjanhoeck Ich bin auf genau das gleiche Problem anonyme Funktionen als Elementrenderer anstelle von benannten Komponenten verwenden. Ich bin kein React-Guru, aber ich glaube, dies bringt die Versöhnung von React durcheinander, da die Komponenten zwischen den Renderings nicht erkennbar gleich sind.

Ich habe ein CodeSandbox-Beispiel erstellt, das das Problem hier veranschaulicht: https://codesandbox.io/s/qx4088mn36

Ich glaube, dies hängt auch mit dem Gespräch hier zusammen: https://github.com/bvaughn/react-window/issues/85#issuecomment -436329610

Das sehe ich auch nach einem kurzen Blick heute Morgen. (Schrieb eine E-Mail, wurde aber unterbrochen.) Das Verschieben der Inline-Funktion auf eine Instanz-Requisite beschleunigte die Dinge (brach aber auch einige andere Dinge, für die ich aufgrund der Größe des Repro-Falls keine Zeit hatte, sie aufzuspüren).

Ich glaube, dies bringt die Abstimmung von React durcheinander, da die Komponenten zwischen den Renderings nicht erkennbar gleich sind.

Das ist richtig. 👍

Hmm. Dies ist bedauerlich, da ich mein Projekt mit ReasonReact schreibe, dem (derzeit) die erforderlichen Funktionen zur Verbreitung von Requisiten / Funktionskomponenten fehlen, um dieses Problem zu vermeiden. Ich erkenne, dass dies in keiner Weise ein Problem mit dem Reaktionsfenster ist, sondern nur eine Einschränkung des ReasonML-Typsystems, aber ich nehme an, dass es erwähnenswert ist, falls jemand anderes auf diesen Thread stößt.

Aus diesem Grund zeigen alle Dokumentbeispiele, dass das Element-Rendering außerhalb der übergeordneten Komponente definiert wird, und das Memo-Beispiel zeigt, wie Daten zwischen beiden geteilt werden. (Im Grunde ist es wie ein leichter, eingebauter Kontext.)

Großartig, ich werde einen Blick darauf werfen! :) :)

Ihre Lösung hat das Problem behoben! Danke und einen schönen Tag noch