Wie rendert man Listen mit FlatList?

Question

Accepted Answer

**FlatList** ist Reacts Native-Komponente zum effizienten Rendern von **scrollbaren Datenlisten**. Sie rendert Elemente **lazy** (nur das Sichtbare), was für lange Listen performant ist — weit besser als das Mappen von Daten in einer ScrollView. ## FlatList — effiziente Listen ```jsx import { FlatList, Text, View } from 'react-native'; function UserList({ users }) { return ( item.id} // unique key per item (important!) renderItem={({ item }) => ( // how to render each item {item.name} )} /> ); } ``` FlatList benötigt das **data**-Array, eine **renderItem**-Funktion (zum Rendern jedes Elements) und einen **keyExtractor** (eindeutige Schlüssel) — und rendert Elemente effizient. ## Warum FlatList (nicht ScrollView + map) ```text ❌ ScrollView with data.map(...) → renders ALL items at once (even off-screen) → slow/memory-heavy for long lists ✅ FlatList → renders only VISIBLE items lazily (virtualization); recycles as you scroll → performant for long/large lists → Use FlatList for any non-trivial list; ScrollView only for small, fixed content. ``` ## Nützliche FlatList-Features ```text ✓ onEndReached → load more data when scrolling near the end (INFINITE SCROLL / pagination) ✓ refreshing / onRefresh → PULL-TO-REFRESH ✓ ListHeaderComponent / ListFooterComponent / ItemSeparatorComponent ✓ numColumns → grid layout; horizontal → horizontal list ✓ SectionList → for sectioned/grouped lists ``` ## Warum es wichtig ist FlatList zu verstehen ist essentiell, weil **das Anzeigen von Datenlisten ein nahezu universelles Bedürfnis in Apps ist**, und FlatList die Standard-, performante Methode dafür in React Native ist — ein Must-Know. Fast jede App zeigt Listen (Feeds, Nachrichten, Suchergebnisse), und dies effizient zu tun ist wichtig. Der Schlüssel ist, dass **FlatList Elemente lazy rendert** (nur das Sichtbare, via Virtualisierung, Recycling beim Scrollen) — was es für lange Listen performant macht, im Gegensatz zum häufigen Fehler, eine **ScrollView mit `data.map()`** zu verwenden, die alle Elemente auf einmal rendert (auch unsichtbare), was zu Langsamkeit und Speicherproblemen bei langen Listen führt. Zu verstehen, **FlatList für jede nicht-triviale Liste zu verwenden** (und ScrollView nur für kleine, feste Inhalte) ist wichtiges praktisches Wissen, das echte Performance-Probleme verhindert. Das Verständnis der grundlegenden Verwendung (das `data`-Array, die `renderItem`-Funktion und der `keyExtractor` für eindeutige Schlüssel) ist notwendig zum Rendern von Listen. Zu verstehen, **nützliche Features** — `onEndReached` (für unendliches Scrollen/Pagination, Laden weiterer Daten am Ende — ein sehr häufiges Bedürfnis), Pull-to-Refresh, Header-/Footer-/Separator-Komponenten, Grid- und horizontale Layouts und SectionList für gruppierte Listen — deckt die häufigen Listen-Anforderungen ab, die Apps haben. Da das effiziente Anzeigen von Listen ein nahezu universelles App-Bedürfnis ist und FlatList (mit ihrem lazy Rendering/Virtualisierung) die Standard-, performante React-Native-Lösung ist — weit besser als der naive ScrollView+map-Ansatz — ist das Verstehen von FlatList essentielles, häufig angewendetes React-Native-Wissen — eine Kernkomponente, die in fast jeder App zum Anzeigen von Datenlisten verwendet wird, wo das Verständnis ihres effizienten lazy Rendering und ihrer Features (wie unendliches Scrollen und Pull-to-Refresh) grundlegend für das Erstellen performanter, funktionsfähiger Listen ist — eine Standardfähigkeit für React-Native-Entwicklung.