Kaip su FlatList atvaizduoti sąrašus?

Question

Accepted Answer

**FlatList** yra React Native komponentas, skirtas efektyviai atvaizduoti **slenkančius duomenų sąrašus**. Jis atvaizduoja elementus **tingiai** (tik matomus), todėl yra efektyvus ilgiems sąrašams — žymiai geresnis nei duomenų žemėlapis ScrollView viduje. ## FlatList — efektyvūs sąrašai ```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 priima **duomenų** masyvą, **renderItem** funkciją (kiekvieno elemento atvaizdinimui) ir **keyExtractor** (unikalūs raktai) — ir efektyviai atvaizduoja elementus. ## Kodėl FlatList (o 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. ``` ## Naudingi FlatList bruožai ```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 ``` ## Kodėl tai svarbu Suprasti FlatList yra esminis, nes **sąrašų duomenų atvaizdavimas yra beveik universali programų poreikis**, o FlatList yra standartinis, efektyvus būdas tai daryti React Native, todėl tai yra būtinas žinias. Beveik kiekviena programa rodo sąrašus (srautus, žinutes, paieškos rezultatus), o tai daryti efektyviai yra svarbu. Pagrindinė intuicija yra ta, kad **FlatList atvaizduoja elementus tingiai** (tik matomus, per virtualizacijos ir reciklizavimo slenkant) — todėl efektyvus ilgiems sąrašams, priešingai nei dažna klaida naudoti **ScrollView su `data.map()`**, kuris atvaizduoja visus elementus iš karto (net ekrane nesimatomus), sukeldamas lėtumą ir atminties problemas ilgiems sąrašams. Suprasti **FlatList naudoti bet kokiam netrivialiam sąrašui** (ir ScrollView tik mažam, fiksuotam turiniui) yra svarbi praktinė žinią, kuri neleidžia realiais našumo problemoms. Suprasti pagrindinį naudojimą (**duomenų** masyvą, **renderItem** funkciją ir **keyExtractor** unikalius raktus) yra būtina sąrašams atvaizduoti. Suprasti **naudingus bruožus** — **onEndReached** (begalinis slinkimas/puslapiavimas, duomenų įkėlimas šalia pabaigos — labai dažnas poreikis), tempimą atnaujinti, antraštės/poraštės/skyriklių komponentus, tinklelio ir horizontalius išdėstymus bei SectionList sugrupuotiems sąrašams — apima dažnus sąrašų reikalavimus, kuriuos turėti programos. Kadangi sąrašų efektyvus atvaizdavimas yra beveik universali programų poreikis o FlatList (su jo tingiu rendizimu/virtualizacija) yra standartinis, efektyvus React Native sprendimas — žymiai geresnis nei naivus ScrollView+map metodas — suprasti FlatList yra esminis, dažnai taikomas React Native žinias — pagrindinį komponentą, naudojamą beveik kiekvienoje programoje duomenų sąrašams rodyti, kur supratimas jo efektyvaus tingaus rendizimu ir bruožų (pvz., begalinio slinkimo ir tempimo atnaujinimo) yra pagrindinis efektyvių, funkcinių sąrašų kūrimui — standartinis įgūdis React Native kūrimui.