vergleichen Leistung scrollView VS listView in reagieren native

Question

Ich muss wissen, welche diese beiden Methoden besser für die Implementierung von Hochleistungs-Liste mit großen Datenmengen ist.

Scrollliste: http://blog.getchop.io/2016/03/26/fast-and-fluid-infinite-list-with-react-native/

Listview: https://github.com/remobile/react-native-refresh-infinite-listview

Answer 1

In Ihrem Fall der Hauptunterschied zwischen Listview und Scrollview, die Sie besonders aufmerksam gemacht werden sollte, ist, wie die Komponente das untergeordnete Element macht. ScrollView rendert alle untergeordneten Elemente gleichzeitig. ListView verfügt über einige zusätzliche Funktionen, mit denen Sie problemlos eine Liste mit potenziell unendlich vielen Elementen nach unten scrollen können. Zitiert von den documentation, hier sind die Leistungsmerkmale in Listview-Verbesserung:

1. Nur neu rendern geändertene Zeilen - die rowHasChanged Funktion zur Datenquelle zur Verfügung gestellt erzählt die Listview, wenn es eine Reihe neu zu machen braucht, weil Die Quelldaten wurden geändert. Weitere Informationen finden Sie unter ListViewDataSource.

2. Rate begrenzte Reihe Rendering - standardmäßig nur eine Zeile dargestellt wird pro Ereignis-Schleife (anpassbar mit dem pageSize prop). Dadurch wird die Arbeit in kleinere Abschnitte unterteilt, um die Wahrscheinlichkeit zu verringern, dass Frames beim Rendern von Zeilen verloren gehen.

viele dynamischen Daten mit Scrollview Rendering wird auf jeden Fall der Speichernutzung und die Leistung auswirken, da sie alle untergeordneten Komponenten auf einmal machen und es wird Komponenten wieder machen, auch wenn die Daten nicht geändert haben. Wenn Sie also nur eines der beiden in diesem Fall verwenden können, verwenden Sie die Komponente ListView.

Wenn Sie RN v> = 0,43 verwenden, verwenden Sie am besten die Komponente FlatList. Der Hauptvorteil dieser Methode besteht darin, dass die Komponente nur bei Bedarf gerendert wird (Lazy Loading).

Für tiefergehende Erklärung empfehle ich die official RN documentation.