Bạn render list với FlatList như thế nào?

Question

Accepted Answer

**FlatList** là component của React Native để render hiệu quả các **list cuộn được** của dữ liệu. Nó render các item **lazily** (chỉ những gì hiển thị), giúp nó có hiệu năng tốt cho list dài — vượt trội so với map qua dữ liệu trong một ScrollView. ## FlatList — list hiệu quả ```jsx import { FlatList, Text, View } from 'react-native'; function UserList({ users }) { return ( item.id} // key duy nhất cho mỗi item (quan trọng!) renderItem={({ item }) => ( // cách render từng item {item.name} )} /> ); } ``` FlatList nhận mảng **data**, một hàm **renderItem** (render từng item), và một **keyExtractor** (key duy nhất) — và render các item hiệu quả. ## Tại sao dùng FlatList (không phải ScrollView + map) ```text ❌ ScrollView với data.map(...) → render TẤT CẢ item cùng lúc (kể cả ngoài màn hình) → chậm/ngốn bộ nhớ với list dài ✅ FlatList → chỉ render item HIỂN THỊ lazily (virtualization); tái sử dụng khi cuộn → hiệu năng tốt cho list dài/lớn → Dùng FlatList cho mọi list không tầm thường; ScrollView chỉ cho nội dung nhỏ, cố định. ``` ## Các tính năng FlatList hữu ích ```text ✓ onEndReached → tải thêm dữ liệu khi cuộn gần cuối (INFINITE SCROLL / phân trang) ✓ refreshing / onRefresh → PULL-TO-REFRESH (kéo để làm mới) ✓ ListHeaderComponent / ListFooterComponent / ItemSeparatorComponent ✓ numColumns → layout dạng lưới; horizontal → list nằm ngang ✓ SectionList → cho list chia section/nhóm ``` ## Tại sao điều này quan trọng Hiểu FlatList là thiết yếu vì **hiển thị list dữ liệu là nhu cầu gần như phổ quát** trong các app, và FlatList là cách tiêu chuẩn, hiệu năng tốt để làm việc đó trong React Native, nên đây là kiến thức buộc phải biết. Gần như mọi app đều hiển thị list (feed, tin nhắn, kết quả tìm kiếm), và làm điều đó hiệu quả là quan trọng. Điểm mấu chốt là **FlatList render các item lazily** (chỉ những gì hiển thị, qua virtualization, tái sử dụng khi cuộn) — giúp nó có hiệu năng tốt cho list dài, trái với lỗi phổ biến là dùng một **ScrollView với `data.map()`** vốn render tất cả item cùng lúc (kể cả ngoài màn hình), gây chậm và vấn đề bộ nhớ với list dài. Hiểu rằng nên **dùng FlatList cho mọi list không tầm thường** (và ScrollView chỉ cho nội dung nhỏ, cố định) là kiến thức thực hành quan trọng giúp ngăn các vấn đề hiệu năng thực tế. Hiểu cách dùng cơ bản (mảng `data`, hàm `renderItem`, và `keyExtractor` cho key duy nhất) là cần thiết để render list. Hiểu **các tính năng hữu ích** — `onEndReached` (cho infinite scroll/phân trang, tải thêm dữ liệu gần cuối — một nhu cầu rất phổ biến), pull-to-refresh, các component header/footer/separator, layout lưới và nằm ngang, và SectionList cho list nhóm — bao quát các yêu cầu list phổ biến của các app. Vì hiển thị list hiệu quả là yêu cầu gần như phổ quát của app và FlatList (với render lazily/virtualization của nó) là giải pháp React Native tiêu chuẩn, hiệu năng tốt — vượt trội so với cách ngây thơ ScrollView+map — hiểu FlatList là kiến thức React Native thiết yếu, được áp dụng thường xuyên — một component cốt lõi dùng trong gần như mọi app để hiển thị list dữ liệu, nơi hiểu render lazily hiệu quả và các tính năng của nó (như infinite scroll và pull-to-refresh) là nền tảng để xây dựng list có hiệu năng, hoạt động được, một kỹ năng tiêu chuẩn cho phát triển React Native.