Bagaimanakah anda merender senarai dengan FlatList?

Question

Accepted Answer

**FlatList** ialah komponen React Native untuk merender **senarai boleh tatal** data dengan cekap. Ia merender item secara **malas** (hanya yang kelihatan), menjadikannya berprestasi untuk senarai panjang — jauh lebih baik daripada memetakan data dalam ScrollView. ## FlatList — senarai cekap ```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 mengambil tatasusunan **data**, fungsi **renderItem** (merender setiap item), dan **keyExtractor** (key unik) — dan merender item dengan cekap. ## Mengapa FlatList (bukan 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. ``` ## Ciri FlatList yang berguna ```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 ``` ## Mengapa ia penting Memahami FlatList adalah penting kerana **memaparkan senarai data ialah keperluan hampir universal** dalam aplikasi, dan FlatList ialah cara standard dan berprestasi untuk melakukannya dalam React Native, jadi ia merupakan pengetahuan yang mesti diketahui. Hampir setiap aplikasi memaparkan senarai (feed, mesej, hasil carian), dan melakukannya dengan cekap adalah penting. Wawasan utama ialah bahawa **FlatList merender item secara malas** (hanya yang kelihatan, melalui virtualisasi, mengitar semula semasa anda menatal) — menjadikannya berprestasi untuk senarai panjang, berbeza dengan kesilapan biasa menggunakan **ScrollView dengan `data.map()`** yang merender semua item sekaligus (walaupun di luar skrin), menyebabkan kelambatan dan masalah memori untuk senarai panjang. Memahami untuk **menggunakan FlatList untuk sebarang senarai bukan remeh** (dan ScrollView hanya untuk kandungan kecil dan tetap) ialah pengetahuan praktikal penting yang mencegah masalah prestasi sebenar. Memahami penggunaan asas (tatasusunan `data`, fungsi `renderItem`, dan `keyExtractor` untuk key unik) perlu untuk merender senarai. Memahami **ciri-ciri berguna** — `onEndReached` (untuk tatal tanpa henti/penomboran, memuatkan lebih banyak data berhampiran hujung — keperluan yang sangat biasa), pull-to-refresh, komponen pengepala/pengaki/pemisah, susun atur grid dan mendatar, dan SectionList untuk senarai berkumpulan — merangkumi keperluan senarai biasa yang dimiliki aplikasi. Memandangkan memaparkan senarai dengan cekap ialah keperluan aplikasi hampir universal dan FlatList (dengan rendering malas/virtualisasinya) ialah penyelesaian React Native standard dan berprestasi — jauh lebih baik daripada pendekatan ScrollView+map yang naif — memahami FlatList adalah pengetahuan React Native yang penting dan kerap digunakan — komponen teras yang digunakan dalam hampir setiap aplikasi untuk memaparkan senarai data, di mana memahami rendering malasnya yang cekap dan ciri-ciri (seperti tatal tanpa henti dan pull-to-refresh) adalah asas untuk membina senarai yang berprestasi dan berfungsi, satu kemahiran standard untuk pembangunan React Native.