Πώς κάνετε render σε λίστες με FlatList;

Question

Accepted Answer

**FlatList** είναι το component του React Native για αποδοτική απόδοση **κυλιόμενων λιστών** δεδομένων. Κάνει render στα items **εκ των υστέρων** (μόνο αυτά που είναι ορατά), κάνοντάς το αποδοτικό για μεγάλες λίστες — πολύ καλύτερα από το mapping πάνω σε δεδομένα σε ένα ScrollView. ## FlatList — αποδοτικές λίστες ```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 παίρνει τον πίνακα **data**, μια συνάρτηση **renderItem** (απόδοση κάθε item), και ένα **keyExtractor** (μοναδικά κλειδιά) — και κάνει render τα items αποδοτικά. ## Γιατί FlatList (όχι 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. ``` ## Χρήσιμα χαρακτηριστικά 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 ``` ## Γιατί έχει σημασία Η κατανόηση του FlatList είναι ουσιαστική επειδή **η απεικόνιση λιστών δεδομένων είναι μια σχεδόν καθολική ανάγκη** σε εφαρμογές, και το FlatList είναι ο τυπικός, αποδοτικός τρόπος για να το κάνετε στο React Native, οπότε είναι απαραίτητη γνώση. Σχεδόν κάθε εφαρμογή εμφανίζει λίστες (feeds, μηνύματα, αποτελέσματα αναζήτησης), και η αποδοτική απεικόνισή τους είναι σημαντική. Το κύριο σημείο είναι ότι **το FlatList κάνει render τα items εκ των υστέρων** (μόνο αυτά που είναι ορατά, μέσω virtualization, ανακύκλωσης καθώς κάνετε scroll) — κάνοντάς το αποδοτικό για μεγάλες λίστες, σε αντίθεση με το συνηθισμένο λάθος χρήσης ενός **ScrollView με `data.map()`** το οποίο κάνει render όλα τα items ταυτόχρονα (ακόμα και off-screen), προκαλώντας αργή απόδοση και προβλήματα μνήμης για μεγάλες λίστες. Η κατανόηση να **χρησιμοποιήσετε FlatList για οποιαδήποτε μη-ασήμαντη λίστα** (και ScrollView μόνο για μικρό, σταθερό περιεχόμενο) είναι σημαντική πρακτική γνώση που αποτρέπει πραγματικά προβλήματα απόδοσης. Η κατανόηση της βασικής χρήσης (ο πίνακας `data`, η συνάρτηση `renderItem` και το `keyExtractor` για μοναδικά κλειδιά) είναι απαραίτητη για την απόδοση λιστών. Η κατανόηση **χρήσιμων χαρακτηριστικών** — `onEndReached` (για άπειρο scroll/pagination, φόρτωση περισσότερων δεδομένων κοντά στο τέλος — μια πολύ συνηθισμένη ανάγκη), pull-to-refresh, header/footer/separator components, grid και horizontal layouts, και SectionList για ομαδοποιημένες λίστες — καλύπτει τις συνηθισμένες απαιτήσεις λιστών που έχουν οι εφαρμογές. Επειδή η αποδοτική απεικόνιση λιστών είναι μια σχεδόν καθολική απαίτηση της εφαρμογής και το FlatList (με την εκ των υστέρων απόδοσή του/virtualization) είναι η τυπική, αποδοτική λύση React Native — πολύ καλύτερη από την αφελή ScrollView+map προσέγγιση — η κατανόηση του FlatList είναι ουσιαστική, συχνά εφαρμοσμένη γνώση React Native — ένα βασικό component που χρησιμοποιείται σχεδόν σε κάθε εφαρμογή για την απεικόνιση λιστών δεδομένων, όπου η κατανόηση της αποδοτικής εκ των υστέρων απόδοσής του και των χαρακτηριστικών του (όπως άπειρο scroll και pull-to-refresh) είναι θεμελιώδης για την κατασκευή αποδοτικών, λειτουργικών λιστών, μια τυπική δεξιότητα για ανάπτυξη React Native.