Unsere Anwendung verwendet das unendliche Scrollen, um in großen Listen heterogener Elemente zu navigieren. Es gibt ein paar Falten:

Es ist üblich, dass unsere Benutzer eine Liste mit 10.000 Artikeln haben und durch 3k + scrollen müssen.Da es sich um umfangreiche Elemente handelt, können nur einige Hundert im DOM vorhanden sein, bevor die Browserleistung inakzeptabel wird.Die Artikel sind unterschiedlich hoch.Die Artikel können Bilder enthalten und wir erlauben dem Benutzer, zu einem bestimmten Datum zu springen. Dies ist schwierig, da der Benutzer zu einem Punkt in der Liste springen kann, an dem Bilder über dem Ansichtsfenster geladen werden müssen, wodurch der Inhalt beim Laden nach unten gedrückt wird. Wenn dies nicht behandelt wird, springt der Benutzer möglicherweise zu einem Datum, wird jedoch zu einem früheren Datum verschoben.

Bekannte, unvollständige Lösungen:

https://github.com/guillaumervls/react-infinite-scroll - Dies ist nur eine einfache "mehr laden, wenn wir den Boden treffen" -Komponente. Es wird kein DOM gekeult, sodass es bei Tausenden von Gegenständen stirbt.

http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html - Zeigt, wie die Bildlaufposition beim Einfügen oben gespeichert und wiederhergestellt wirdoder unten einsetzen, aber nicht beides zusammen.

Ich suche nicht nach dem Code für eine vollständige Lösung (obwohl das großartig wäre.) Stattdessen suche ich nach dem "Reaktionsweg", um diese Situation zu modellieren. Ist der Bildlaufpositionsstatus oder nicht? Welchen Status sollte ich verfolgen, um meine Position in der Liste beizubehalten? Welchen Status muss ich beibehalten, damit ich ein neues Rendering auslöse, wenn ich in der Nähe des unteren oder oberen Bereichs des gerenderten Bereichs einen Bildlauf durchführe?