Conas a bhíonn liostaí á gealadh agat le FlatList?

Question

IT Interview Practice · Accepted Answer

**FlatList** is React Native's component for efficiently rendering **scrollable lists** of data. It renders items **lazily** (only what's visible), making it performant for long lists — far better than mapping over data in a ScrollView. ## FlatList — liostaí éifeachtach ```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} )} /> ); } ``` Tógann FlatList an eagar **data**, fheidhm **renderItem** (ag gealadh gach mhír), agus **keyExtractor** (eochracha uathúla) — agus gealann sé míreanna go héifeachtach. ## Cén fáth FlatList (ní 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. ``` ## Gné úsáideacha 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 ``` ## Cén fáth a bhíonn sé tábhachtach Tá sé riachtanach tuiscint a bheith agat ar FlatList toisc go bhfuil **taispeáint liostaí sonraí ag freainseal ar fhad gach fheidhmchláir**, agus is é FlatList an caighdeán, an bealach éifeachtach é a dhéanamh in React Native, agus mar sin is ríthábhachtach an t-eolas sin a bheith agat. Taispeánann beagnach gach feidhmchlár liostaí (feeds, teachtaireachtaí, torthaí cuardaigh), agus tá sé tábhachtach é sin a dhéanamh go héifeachtach. Is é an príomhinsint ná go **bhíonn FlatList ag gealadh míreanna go mall** (ach an rud atá infhaicsinne, trí dhrithlíonadh, ag athúsáid agus tú ag scrolladh) — rud a dhéanann sé éifeachtach do liostaí fada, i gcodarsnacht leis an earráid choitianta **ScrollView a úsáid le `data.map()`** ina ndéantar gach mhír a ghealadh ag an am (fiú na míreanna as an radarc), rud a thugann moilleadh agus fadhbanna cuimhne do liostaí fada. Tá sé tábhachtach a thuiscint go **gcaithfear FlatList a úsáid do aon liosta nach beag** (agus ScrollView a úsáid ach amháin do bhreac-bharúil bheag, fhoshuiteach) — seo an t-eolas praiticiúil tábhachtach a choiscíonn fadhbanna fíor-dhomhain maoin-úsáide. Tá sé riachtanach a thuiscint an úsáid bhunúsach (an eagar `data`, an fheidhm `renderItem`, agus `keyExtractor` do na heochracha uathúla) chun liostaí a ghealadh. Tá sé tábhachtach a thuiscint **gné úsáideacha** — `onEndReached` (do scrolladh gan teorainn/tréimhsitheoireacht, sonraí níos mó a lódáil gar don deireadh — riachtanas an-choitianta), tarraing-chun-athfhrithealdí, comhpháirt ceanntásc/tráchaire/deighilteora, leagan amach trasthuigthe agus cothrománach, agus SectionList do liostaí grúpáilte — cuimsiú na riachtanais liosta choitianta atá ag feidhmchláir. ">De bharr gur gá do liostaí a thaispeáint go héifeachtach i bhformhór na n-aipeanna agus gur é FlatList (lena ghealadh mall/dhrithlíonadh) an réiteach caighdeánach, éifeachtach React Native — i bhfad níos fearr ná an cur chuige dúchúlach ScrollView+map — tá sé riachtanach tuiscint a bheith agat ar FhatList, eolas React Native a bhíonn á chur i bhfeidhm go minic — comhpháirt bhunúsach a bhíonn i bhformhór na n-aipeanna á úsáid chun liostaí sonraí a thaispeáint, áit a bhfuil sé bunúsach a thuiscint a ghealadh mall éifeachtach agus a ghné (ar nós scrollaidh gan teorainn agus tarraing-chun-athfhrithealdí) — scil bhunúsach do bhothantacht React Native.

FlatList — liostaí éifeachtach

Cén fáth FlatList (ní ScrollView + map)

Gné úsáideacha FlatList

Cén fáth a bhíonn sé tábhachtach

Ceisteanna gaolmhara