Hogyan renderelsz listákat a FlatList segítségével?

Question

Accepted Answer

**FlatList** a React Native komponense az **görgetéséhez alkalmas listák** hatékony renderelésére. Az elemeket **lustán** rendereli (csak amit látni lehet), ami nagyteljesítményű hosszú listák esetén — sokkal jobb, mint az adatok ScrollView-on belüli mappelése. ## FlatList — hatékony listák ```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} )} /> ); } ``` A FlatList szükséges adattömb, egy **renderItem** függvény (az egyes elemek megjelenítéséhez) és egy **keyExtractor** (egyedi kulcsok) — és hatékonyan rendereli az elemeket. ## Miért FlatList (nem 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. ``` ## Hasznos FlatList funkciók ```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 ``` ## Miért fontos A FlatList megértése alapvető, mert az **adatlisták megjelenítése szinte univerzális szükséglet** az alkalmazásokban, és a FlatList a standard, hatékony módja ennek React Native-ben, ezért elengedhetetlen tudás. Szinte minden alkalmazás mutat listákat (feedek, üzenetek, keresési eredmények), és ennek hatékony végrehajtása fontos. A kulcsfontosságú felismerés, hogy a **FlatList lustán rendereli az elemeket** (csak amit látni lehet, virtualizáción keresztül, átcsoportosítva, ahogy görgetesz) — ami nagyteljesítményű hosszú listák esetén, ellentétben a gyakori hibával, hogy a **ScrollView-t `data.map()` függvénnyel** használják, amely az összes elemet egyszerre rendereli (még a képernyőn kívüli részeket is), ami lassúságot és memóriaproblémákat okoz hosszú listák esetén. Annak megértése, hogy **bármilyen nem-triviális lista esetén FlatList-et kell használni** (és ScrollView-t csak kis, fix tartalom esetén) fontos praktikus tudás, amely valós teljesítménybeli problémákat megelőz. Az alapvető használat megértése (az `data` tömb, a `renderItem` függvény és a `keyExtractor` egyedi kulcsokhoz) szükséges listák rendereléshez. A **hasznos funkciók** megértése — `onEndReached` (végtelen görgetéshez/lapozáshoz, további adatok betöltéséhez a végén — nagyon gyakori szükséglet), pull-to-refresh, header/footer/separator komponensek, grid és vízszintes elrendezések, valamint SectionList csoportosított listákhoz — lefedi az általános lista követelményeket, amelyekkel az alkalmazások rendelkeznek. Mivel az adatlisták hatékony megjelenítése szinte univerzális alkalmazási követelmény, és a FlatList (lusta renderelésével/virtualizációjával) a standard, nagyteljesítményű React Native megoldás — sokkal jobb, mint az naiv ScrollView+map megközelítés — a FlatList megértése alapvető, gyakran alkalmazott React Native tudás — egy alapvető komponens, amely szinte minden alkalmazásban használt adatlisták megjelenítésére, ahol annak hatékony lusta renderelésének és funkcióinak (mint az végtelen görgetés és pull-to-refresh) megértése alapvető a nagyteljesítményű, funkcionális listák felépítéséhez, amely standard készség a React Native fejlesztéshez.