Jak renderujesz listy za pomocą FlatList?

Question

Accepted Answer

**FlatList** jest komponentem React Native'a do efektywnego renderowania **przewijalnych list** danych. Renderuje elementy **leniwie** (tylko te widoczne), co czyni go wydajnym dla długich list — znacznie lepiej niż mapowanie danych w ScrollView. ## FlatList — wydajne listy ```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 pobiera tablicę **data**, funkcję **renderItem** (renderującą każdy element) i **keyExtractor** (unikalne klucze) — i efektywnie renderuje elementy. ## Dlaczego FlatList (nie 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. ``` ## Przydatne funkcje 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 ``` ## Dlaczego to ważne Zrozumienie FlatList jest niezbędne, ponieważ **wyświetlanie list danych jest niemal uniwersalną potrzebą** w aplikacjach, a FlatList jest standardowym, wydajnym sposobem na zrobienie tego w React Native'ie, dlatego jest to niezbędna wiedza. Prawie każda aplikacja wyświetla listy (feeds, wiadomości, wyniki wyszukiwania), a robienie tego efektywnie jest ważne. Kluczowa intuicja to to, że **FlatList renderuje elementy leniwie** (tylko te widoczne, poprzez wirtualizację, recykling podczas przewijania) — czyniąc to wydajnym dla długich list, w przeciwieństwie do częstego błędu używania **ScrollView z `data.map()`**, który renderuje wszystkie elementy naraz (nawet poza ekranem), powodując spowolnienie i problemy z pamięcią dla długich list. Zrozumienie, aby **używać FlatList dla każdej nietrywialnej listy** (i ScrollView tylko dla małej, stałej zawartości) jest ważną praktyczną wiedzą, która zapobiega rzeczywistym problemom wydajności. Zrozumienie podstawowego użycia (tablica `data`, funkcja `renderItem` i `keyExtractor` dla unikalnych kluczy) jest niezbędne do renderowania list. Zrozumienie **przydatnych funkcji** — `onEndReached` (dla nieskończonego przewijania/paginacji, ładowania więcej danych blisko końca — bardzo częsta potrzeba), pull-to-refresh, komponenty nagłówka/stopki/separatora, układy siatki i poziome, i SectionList dla zgrupowanych list — obejmuje typowe wymagania list w aplikacjach. Ponieważ efektywne wyświetlanie list jest niemal uniwersalnym wymogiem aplikacji, a FlatList (z jego leniwym renderowaniem/wirtualizacją) jest standardowym, wydajnym rozwiązaniem React Native'a — znacznie lepszym niż naiwne podejście ScrollView+map — zrozumienie FlatList jest niezbędną, często stosowaną wiedzą React Native'a — komponentem podstawowym używanym w prawie każdej aplikacji do wyświetlania list danych, gdzie zrozumienie jego wydajnego leniwego renderowania i funkcji (takich jak nieskończone przewijanie i pull-to-refresh) jest fundamentalne dla budowania wydajnych, funkcjonalnych list, standardową umiejętnością dla rozwoju React Native'a.