Jak vykreslujete seznamy pomocí FlatList?

Question

Accepted Answer

**FlatList** je komponenta React Native pro efektivní vykreslování **posuvných seznamů** dat. Vykresluje položky **líně** (pouze to, co je viditelné), což jej činí výkonným pro dlouhé seznamy — výrazně lepší než mapování dat v ScrollView. ## FlatList — efektivní seznamy ```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 přijímá pole **data**, funkci **renderItem** (vykreslující každou položku) a **keyExtractor** (jedinečné klíče) — a vykresluje položky efektivně. ## Proč FlatList (ne 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. ``` ## Užitečné funkce FlatList ```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 ``` ## Proč je to důležité Porozumění FlatList je zásadní, protože **zobrazování seznamů dat je téměř univerzální potřeba** v aplikacích a FlatList je standardní, výkonný způsob, jak to dělat v React Native, takže jde o nezbytné znalosti. Skoro každá aplikace zobrazuje seznamy (feeds, zprávy, výsledky hledání) a jejich efektivní zobrazování je důležité. Klíčová myšlenka je, že **FlatList vykresluje položky líně** (pouze to, co je viditelné, prostřednictvím virtualizace, recyklace během posunu) — což jej činí výkonným pro dlouhé seznamy, na rozdíl od běžné chyby používání **ScrollView s `data.map()`**, která vykresluje všechny položky najednou (i mimo obrazovku), což způsobuje pomalost a problémy s pamětí pro dlouhé seznamy. Rozdílné pochopení **používání FlatList pro jakýkoli netriviální seznam** (a ScrollView pouze pro malý, pevný obsah) je důležité praktické znalostí, která zabraňuje skutečným problémům s výkonem. Porozumění základnímu použití (pole `data`, funkce `renderItem` a `keyExtractor` pro jedinečné klíče) je nezbytné pro vykreslování seznamů. Porozumění **užitečným funkcím** — `onEndReached` (pro nekonečný posun/stránkování, načítání více dat na konci — velmi běžná potřeba), pull-to-refresh, komponenty záhlaví/zápatí/oddělovače, mřížkové a horizontální rozložení a SectionList pro seskupené seznamy — zahrnuje běžné požadavky na seznamy, které aplikace mají. Proto, že zobrazování seznamů efektivně je téměř univerzální požadavek aplikace a FlatList (se svým líným vykreslováním/virtualizací) je standardní, výkonné řešení React Native — výrazně lepší než naivní přístup ScrollView+map — je porozumění FlatList zásadní, často používané znalosti React Native — základní komponenta používaná v téměř každé aplikaci pro zobrazování datových seznamů, kde pochopení jejího efektivního liveho vykreslování a funkcí (jako nekonečný posun a pull-to-refresh) je zásadní pro vytváření výkonných, funkčních seznamů, standardní dovednost pro vývoj React Native.