Kako renderiraš sezname s FlatList?

Question

Accepted Answer

**FlatList** je komponenta React Native za učinkovito renderiranje **drsečih seznamov** podatkov. Renderira elemente **leno** (samo vidljive), kar ga naredi zmogljivega za dolge sezname — daleko boljše kot mapiranje podatkov v ScrollView. ## FlatList — učinkoviti seznami ```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 sprejme polje **data**, funkcijo **renderItem** (renderiranje vsakega elementa) in **keyExtractor** (edinstveni ključi) — in učinkovito renderira elemente. ## Zakaj 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. ``` ## Koristne lastnosti 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 ``` ## Zakaj je to pomembno Razumevanje FlatList je bistveno, ker je **prikaz seznamov podatkov skoraj univerzalna potreba** v aplikacijah, in FlatList je standardni, učinkoviti način za to v React Native, zato je neobhodno znanje. Skoraj vsaka aplikacija prikazuje sezname (novice, sporočila, rezultati iskanja), in njihov učinkovit prikaz je pomemben. Klučni vpogled je, da **FlatList renderira elemente leno** (samo vidljive, prek virtualizacije, recikliranja med drsenjem) — kar ga naredi zmogljivega za dolge sezname, v nasprotju s pogosto napako uporabe **ScrollView s `data.map()`**, ki renderira vse elemente hkrati (tudi off-screen), kar povzroči počasnost in težave s pomnilnikom za dolge sezname. Razumevanje, da je **FlatList potreben za katerikoli neti manjši seznam** (in ScrollView samo za majhno, fiksno vsebino) je pomembno praktično znanje, ki preprečuje prave težave z zmogljivostjo. Razumevanje osnovne uporabe (polje `data`, funkcija `renderItem` in `keyExtractor` za edinstvene ključe) je potrebno za renderiranje seznamov. Razumevanje **koristnih lastnosti** — `onEndReached` (za neskončno drenje/delitev, nalaganje več podatkov blizu konca — zelo pogosta potreba), vlečenje za osvežitev, komponente glava/noga/ločilo, mrežne in vodoravne postavitve ter SectionList za jih skupizirane sezname — pokriva običajne zahteve seznamov, ki jih imajo aplikacije. Ker je učinkovit prikaz seznamov skoraj univerzalna zahteva aplikacije in je FlatList (s svojo lenovo renderiranje/virtualizacijo) standardna, učinkovita rešitev React Native — daleko boljša od naivnega pristopa ScrollView+map — je razumevanje FlatList bistveno, pogosto uporabljeno znanje React Native — osnovna komponenta, ki se uporablja v skoraj vsaki aplikaciji za prikaz podatkovnih seznamov, kjer je razumevanje njene učinkovite lene renderiranja in lastnosti (kot sta neskončno drenje in vlečenje za osvežitev) temeljno za gradnjo zmogljivih, funkcionalnih seznamov, standarden spretnost za razvoj React Native.