React-window: useMemo innerhalb der _row_-Komponente, wenn das übergeordnete Element neu rendert
Ich habe festgestellt, dass useMemo dazu beiträgt, das (vollständige) erneute Rendern aller Zeilen beim Scrollen der Liste zu vermeiden, und ich möchte, dass dies auch passiert, wenn die übergeordnete Komponente (die die Liste enthält) erneut gerendert wird.
Demo:
https://codesandbox.io/s/v8k75vw0v0
Sie werden beim Scrollen feststellen, dass die Protokollmeldung Actual Row nur auftritt, wenn eine neue Zeile erstellt wird.
Dies ist nicht der Fall, wenn Sie auf die Schaltfläche Rerender parent klicken.
Im Gegensatz dazu kann FakeList der _row_ erlauben, useMemo indem die _row_ als Funktion anstelle einer Komponente verwendet wird.
Ich denke, dies ist eher eine Frage, wie Sie useMemo vollständig nutzen können.
marian-c
Alle 3 Kommentare
Haben Sie diesen Teil der Dokumentation gelesen? https://react-window.now.sh/#/examples/list/memoized -list-items
Es gibt zwei integrierte Memoisierungsoptionen:
Es sieht auch nicht so aus, als ob Ihr Beispiel es verwendet, was aufgrund der Art und Weise, wie React-Window seinen Style-Cache verwaltet, zu unnötigen Re-Renderings führt.
Ich glaube, dieses Problem erfordert keine Änderungen seitens dieser Bibliothek, daher werde ich sie schließen. Wir können mehr reden, wenn Sie Klärungsfragen haben.
bvaughn
am 19. Feb. 2019
Hallo wieder,
Mein Beispiel war nicht das beredteste für das, was ich auszudrücken versuchte, aber ich denke, ich kann es jetzt:
Ausgehend von Ihrem Beispiel (memoized-list-Artikel), auf der nur die _rows_ Rendering , die im Begriff sind , in den Blick zu kommen, möchte ich das auch minimieren macht , wenn Sie ein Element _activate_ (zur Zeit, wenn Sie ein Element klicken , um es zu aktivieren , alle _rows_ in der Ansicht werden neu gerendert).
Ich habe das schließlich erreicht, indem ich die itemData Requisite für FixedSizeList (dadurch kann ich eine verschachtelte Schließung vermeiden); Dies wiederum lässt mich useMemo .
Dieses Thema sollte geschlossen bleiben, aber ich glaube, es ist ein interessantes Beispiel / eine Optimierungsübung und ich würde mich über weitere Beiträge von Ihnen freuen.
Das Ergebnis ist hier: https://codesandbox.io/s/rr7w89w3q
Ich vermeide die EXPENSIVE RENDER auf Kosten eines Wrappers: CHEAP PREP .
Vielen Dank für die Mühe, die Sie in diese Bibliothek gesteckt haben.
marian-c
am 19. Feb. 2019
Ja, das macht Sinn. Wenn sich itemData ändert, wird der Item-Cache _absichtlich_ unterbrochen. In den meisten Fällen möchten Sie dies tun, um veraltete Daten zu vermeiden. Wenn Sie wissen, dass dies für einen bestimmten Anwendungsfall nicht zutrifft, dann scheint eine benutzerdefinierte Logik, wie Sie es getan haben, angemessen zu sein. 👍
bvaughn
am 19. Feb. 2019
Verwandte Themen
ivan-badmaev
·
3Kommentare
ashishgupta1989
·
4Kommentare
bnikom
·
3Kommentare
daihuaye
·
3Kommentare
bitboxer
·
3Kommentare
Hilfreichster Kommentar
Haben Sie diesen Teil der Dokumentation gelesen? https://react-window.now.sh/#/examples/list/memoized -list-items
Es gibt zwei integrierte Memoisierungsoptionen:
React.memoEs sieht auch nicht so aus, als ob Ihr Beispiel es verwendet, was aufgrund der Art und Weise, wie React-Window seinen Style-Cache verwaltet, zu unnötigen Re-Renderings führt.
Ich glaube, dieses Problem erfordert keine Änderungen seitens dieser Bibliothek, daher werde ich sie schließen. Wir können mehr reden, wenn Sie Klärungsfragen haben.