Kuinka renderöit listoja FlatList-komponentilla?

Question

Accepted Answer

**FlatList** on React Nativen komponentti **vieritettävien datalistojen** tehokkaan renderöinnin osalta. Se renderöi kohteita **laiskasti** (vain näkyvät), mikä tekee siitä suorituskykyisen pitkille listoille — paljon parempi kuin datan mappaaminen ScrollView:ssa. ## FlatList — tehokkaat listat ```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 ottaa **data**-taulukon, **renderItem**-funktion (renderöi jokaisen kohteen) ja **keyExtractor**-funktion (ainutlaatuiset avaimet) — ja renderöi kohteet tehokkaasti. ## Miksi FlatList (ei 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. ``` ## Hyödylliset FlatList-ominaisuudet ```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 ``` ## Miksi se on tärkeää FlatListin ymmärtäminen on välttämätöntä, koska **datalistojen näyttäminen on lähes yleinen tarve** sovelluksissa, ja FlatList on vakiomuotoinen, tehokas tapa tehdä se React Nativessa — se on ehdottoman välttämätön tieto. Lähes jokainen sovellus näyttää listoja (syötteet, viestit, hakutulokset), ja sen tekeminen tehokkaasti on tärkeää. Päähavainto on, että **FlatList renderöi kohteita laiskasti** (vain näkyvät virtualisoinnin kautta, kierrätetään vierityksen aikana) — mikä tekee siitä tehokkaan pitkille listoille, toisin kuin yleinen virhe käyttää **ScrollView ja `data.map()`** joka renderöi kaikki kohteet kerralla (myös ruudun ulkopuolella), aiheuttaen hitauden ja muistiongelmia pitkille listoille. Ymmärtäminen käyttää **FlatListia mihin tahansa ei-triviaaliseen listaan** (ja ScrollView vain pienille, kiinteille sisällöille) on tärkeää käytännön tietoa, joka estää todellisia suorituskykyongelmia. Peruskäytön ymmärtäminen (`data`-taulukko, `renderItem`-funktio ja `keyExtractor` ainutlaatuisille avaimille) on välttämätöntä listojen renderöintiin. Hyödyllisten ominaisuuksien ymmärtäminen — `onEndReached` (äärettömään vieritykseen/sivutukseen, lataa lisää dataa lähellä loppua — hyvin yleinen tarve), vedon päivitys, ylä-/ala-/erotinkomponentit, ruudukko ja vaakasuuntaiset asettelut ja SectionList ryhmitetyille listoille — kattaa yleiset listavaatimukset, joita sovelluksilla on. Koska listojen tehokas näyttäminen on lähes yleinen sovelluksen vaatimus ja FlatList (sen laiskalla renderöinnillä/virtualisoinnilla) on vakiomuotoinen, tehokas React Native -ratkaisu — paljon parempi kuin naiivin ScrollView+map-lähestymistavan — FlatListin ymmärtäminen on välttämätöntä, usein käytettyä React Native -tietoa — ydinkomponentti, jota käytetään lähes jokaisessa sovelluksessa datalistojen näyttämiseen, jossa sen tehokkaan laiskaksi renderöinnin ja ominaisuuksien (kuten äärettömän vierityksen ja vedettävän päivityksen) ymmärtäminen on perustavaa laatua olevaa tehokkaille, toimiville listoille — React Native -kehityksen vakiotaito.