Theorie

FlatList und SectionList sind Komponenten in React Native, die zum Rendern von Datenlisten verwendet werden. Beide Komponenten sind effizient im Umgang mit großen Listen und für Leistung optimiert. Der Hauptunterschied liegt in der Art und Weise, wie sie Daten handhaben und in ihren Anwendungsfällen.

FlatList

Warum FlatList verwenden

• Dynamisches Daten-Rendering: Ideal für das effiziente Rendering großer Mengen dynamischer Daten. Rendert nur die Elemente, die aktuell auf dem Bildschirm sichtbar sind, um die Leistung zu gewährleisten;
• Speichereffizienz: Speicher effizient, da es nicht den gesamten Datensatz auf einmal in den Speicher lädt;
• Lazy Loading: Implementiert Lazy Loading, was bedeutet, dass nur die Daten geladen werden, die für die sichtbaren Elemente benötigt werden.

Arbeiten mit FlatList

• data: Ein Array von Daten, die gerendert werden sollen;
• renderItem: Eine Funktion, die ein einzelnes Element rendert;
• keyExtractor: Eine Funktion, um einen eindeutigen Schlüssel für jedes Element zu extrahieren;
• onEndReached (optional): Eine Callback-Funktion, die aufgerufen wird, wenn das Ende der Liste erreicht ist;
• onRefresh (optional): Eine Callback-Funktion, die aufgerufen wird, wenn der Benutzer die Liste nach unten zieht, um sie zu aktualisieren.

Beispiel

Ergebnis

SectionList

Warum SectionList verwenden

• Organisierte Daten: Nützlich, wenn die Daten natürlich in Abschnitte fallen (z.B. Kategorien, Daten). Jeder Abschnitt kann eine eigene Kopfzeile haben;
• Verbesserte Lesbarkeit: Bietet eine strukturierte und organisierte Möglichkeit, Daten darzustellen, was die Lesbarkeit verbessert;
• Dynamische Abschnitte: Ermöglicht dynamische Aktualisierungen sowohl der Abschnitte als auch der Daten, was es für dynamische Inhalte geeignet macht;
• Anpassbare Kopfzeilen: Unterstützt benutzerdefinierte Abschnittskopfzeilen über die renderSectionHeader-Eigenschaft.

Arbeiten mit SectionList

• sections: Ein Array von Abschnitten, wobei jeder Abschnitt ein Datenarray und optionale Funktionen renderItem und renderSectionHeader hat;
• renderItem: Eine Funktion, die ein einzelnes Element rendert;
• renderSectionHeader: Eine Funktion, die die Abschnittskopfzeile rendert;
• keyExtractor: Eine Funktion, um einen eindeutigen Schlüssel für jedes Element zu extrahieren;
• onEndReached (optional): Eine Rückruffunktion, die aufgerufen wird, wenn das Ende der Liste erreicht ist;
• onRefresh (optional): Eine Rückruffunktion, die aufgerufen wird, wenn der Benutzer die Liste nach unten zieht, um sie zu aktualisieren.

Beispiel

Ergebnis

In der Praxis