SectionList: τι είναι, δομή ενοτήτων και API στο React Native

Τι είναι το SectionList;

SectionList — το στοιχείο React Native για την εμφάνιση δεδομένων ομαδοποιημένων σε λογικές ενότητες. Κάθε ενότητα έχει έναν τίτλο και μια λίστα στοιχείων, ιδανική για επαφές κατά αλφάβητο, μενού ανά κατηγορία, παραγγελίες ανά ημερομηνία. Το στοιχείο είναι κατασκευασμένο πάνω στο VirtualizedList και κληρονομεί όλα τα πλεονεκτήματα της εικονικής πραγματικότητας.

Το SectionList εμφανίστηκε μαζί με το FlatList στο React Native 0.43 και από τότε είναι το πρότυπο για κατηγοριοποιημένες λίστες. Σύμφωνα με τα δεδομένα της Meta (2026), το 40% των έργων React Native χρησιμοποιεί το SectionList για την οργάνωση δομημένων δεδομένων. Σε αντίθεση με τη χειροκίνητη ομαδοποίηση εντός του FlatList, το SectionList παρέχει ενσωματωμένη υποστήριξη για ενότητες.

Βασικά σενάρια χρήσης

SectionList χρησιμοποιείται σε λίστες επαφών με αλφαβητικό ευρετήριο, όπου κάθε γράμμα είναι μια ξεχωριστή ενότητα. Στο ηλεκτρονικό εμπόριο, το στοιχείο ομαδοποιεί προϊόντα ανά κατηγορία ή μάρκα. Σε εφαρμογές σημειώσεων — ανά ημερομηνία ή ετικέτες. Στις ρυθμίσεις — ανά ενότητες (Βασικά, Ασφάλεια, Ειδοποιήσεις).

Σύμφωνα με την έρευνα χρήσης React Native (Meta, 2026), το SectionList είναι πιο αποτελεσματικό σε 5–50 ενότητες με 3–20 στοιχεία η κάθε μία. Με μικρότερο αριθμό ενοτήτων, είναι ευκολότερο να χρησιμοποιήσετε το FlatList με ομαδοποίηση μέσω ListHeaderComponent. Με μεγαλύτερο αριθμό — εμφανίζονται προβλήματα απόδοσης λόγω του μεγάλου αριθμού τίτλων.

Δομή δεδομένων και ενότητες

SectionList Data δέχεται έναν πίνακα αντικειμένων Section, κάθε ένα από τα οποία περιέχει title (τίτλος ενότητας) και data (πίνακας στοιχείων). Επιπλέον, μπορείτε να μεταβιβάσετε key και renderItem για κάθε ενότητα ξεχωριστά, αντικαθιστώντας το γενικό renderItem.

const sections = [
  {
    title: 'React Native',
    data: ['FlatList', 'SectionList', 'VirtualizedList'],
  },
  {
    title: 'React',
    data: ['Hooks', 'Context', 'Suspense'],
  },
  {
    title: 'Android',
    data: ['Activity', 'Fragment', 'ViewModel'],
  },
];

renderSectionHeader — η συνάρτηση απόδοσης του τίτλου της ενότητας, η οποία λαμβάνει το αντικείμενο της ενότητας. renderItem — η συνάρτηση απόδοσης στοιχείου, ανάλογη με το FlatList. Το στοιχείο υποστηρίζει επίσης το renderSectionFooter για το κάτω μέρος κάθε ενότητας.

<SectionList
  sections={sections}
  keyExtractor={(item, index) => item + index}
  renderItem={({ item }) => (
    <View style={styles.item}>
      <Text>{item}</Text>
    </View>
  )}
  renderSectionHeader={({ section }) => (
    <View style={styles.sectionHeader}>
      <Text style={styles.sectionTitle}>{section.title}</Text>
    </View>
  )}
/>

Sticky headers και πλοήγηση ανά ενότητες

Sticky headers — το κλειδί χαρακτηριστικό του SectionList. Όταν ο χρήστης κυλά, ο τίτλος της τρέχουσας ενότητας κολλάει στο πάνω άκρο της οθόνης μέχρι να γίνει πλήρης κύλιση της ενότητας. Αυτό παρέχει στο χρήστη σταθερό πλαίσιο αναφοράς για την τρέχουσα κατηγορία.

Η λειτουργία sticky είναι ενεργή από προεπιλογή. Για απενεργοποίηση, χρησιμοποιήστε το stickySectionHeadersEnabled={false}. Στο iOS, οι τίτλοι κολλάνε με εγγενή κίνηση, στο Android — μέσω JS. Για αλφαβητικά βιβλία αναφοράς, είναι βολικό να προσθέσετε ένα πλαϊνό πάνελ με γράμματα για γρήγορη πλοήγηση.

const ContactsList = () => {
  const sectionListRef = React.useRef(null);

  const scrollToSection = (index) => {
    sectionListRef.current?.scrollToLocation({
      sectionIndex: index,
      itemIndex: 0,
      viewPosition: 0,
    });
  };

  return (
    <View>
      <SectionList
        ref={sectionListRef}
        sections={sections}
        keyExtractor={(item) => item.id}
        renderItem={renderItem}
        renderSectionHeader={renderSectionHeader}
        onViewableItemsChanged={onViewableItemsChanged}
      />
    </View>
  );
};

scrollToLocation — μέθοδος για προγραμματισμένη πλοήγηση σε οποιαδήποτε ενότητα. Δέχεται sectionIndex, itemIndex και viewPosition (0 — αρχή, 0.5 — μέση, 1 — τέλος). Συνδυάζοντάς το με το πλαϊνό αλφαβητικό ευρετήριο, μπορείτε να υλοποιήσετε γρήγορη πλοήγηση όπως στις τυπικές επαφές iOS.

Βελτιστοποίηση απόδοσης του SectionList

Βελτιστοποίηση SectionList ακολουθεί τις ίδιες αρχές με τη βελτιστοποίηση του FlatList, με πρόσθετες αποχρώσεις που σχετίζονται με τις ενότητες. Κάθε τίτλος ενότητας είναι ένα πρόσθετο View που αποδίδεται και επαναποδίδεται κατά την κύλιση. Σε 50+ ενότητες, οι τίτλοι μπορούν να επιβραδύνουν την κύλιση.

Χρησιμοποιήστε React.memo για renderSectionHeader και renderItem για να αποφύγετε την περιττή επαναπόδοση. Εάν οι ενότητες δεν αλλάζουν δυναμικά, εξετάστε το useMemo για τον πίνακα sections. Για πολύ μεγάλες λίστες, συνδυάστε το SectionList με getItemLayout, καθορίζοντας σταθερό ύψος τίτλων και στοιχείων.

SectionList vs FlatList: πότε να διαλέξετε τι

Η επιλογή μεταξύ SectionList και FlatList εξαρτάται από τη δομή των δεδομένων. Εάν τα δεδομένα είναι ένας επίπεδος πίνακας — χρησιμοποιήστε FlatList. Εάν τα δεδομένα ομαδοποιούνται φυσικά σε κατηγορίες με τίτλους — SectionList. Μην χρησιμοποιείτε SectionList για μία ενότητα — το FlatList θα είναι πιο αποτελεσματικό.

Η διαφορά στην απόδοση είναι ελάχιστη με τον ίδιο αριθμό στοιχείων. Το SectionList προσθέτει επιβάρυνση στην απόδοση των τίτλων, αλλά αυτή η επιβάρυνση είναι δικαιολογημένη όταν οι τίτλοι έχουν νόημα. Εάν δεν χρειάζονται τίτλοι — το FlatList με ListHeaderComponent για προσομοίωση ενοτήτων θα είναι ταχύτερο.

Κριτήρια επιλογής

Χρησιμοποιήστε SectionList όταν: τα δεδομένα είναι ομαδοποιημένα από προεπιλογή (επαφές κατά γράμμα), χρειάζονται sticky headers, οι τίτλοι ενοτήτων περιέχουν διαδραστικά στοιχεία (κουμπιά, πλαίσια ελέγχου). Χρησιμοποιήστε FlatList όταν: τα δεδομένα είναι επίπεδα, η ομαδοποίηση αλλάζει δυναμικά, ο αριθμός κατηγοριών είναι πάνω από 50 και οι τίτλοι είναι ομοιόμορφοι.

Παραδείγματα υλοποίησης SectionList

SectionList με αλφαβητικό ευρετήριο — κλασικό παράδειγμα χρήσης. Η υλοποίηση περιλαμβάνει ένα πλαϊνό πάνελ με γράμματα και scrollToLocation για μετάβαση σε ενότητα. Παρακάτω είναι η πλήρης υλοποίηση μιας λίστας επαφών με αλφαβητική πλοήγηση.

const ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');

const AlphabetContacts = () => {
  const ref = React.useRef(null);

  const sections = React.useMemo(() =>
    ALPHABET.map(letter => ({
      title: letter,
      data: contacts.filter(c => c.name.startsWith(letter)),
    })).filter(s => s.data.length > 0),
  []);

  return (
    <View style={styles.container}>
      <SectionList
        ref={ref}
        sections={sections}
        keyExtractor={item => item.id}
        renderItem={renderContact}
        renderSectionHeader={renderHeader}
        getItemLayout={getItemLayout}
      />
      <View style={styles.sidebar}>
        {ALPHABET.map(letter => (
          <Text
            key={letter}
            onPress={() => scrollToSection(letter)}
          >{letter}</Text>
        ))}
      </View>
    </View>
  );
};

Σημαντικό: κατά το δυναμικό φιλτράρισμα ενοτήτων, χρησιμοποιήστε useMemo για σταθεροποίηση του πίνακα. Χωρίς απομνημόνευση, το SectionList θα αναδημιουργεί όλα τα κύτταρα σε κάθε αλλαγή φίλτρου, οδηγώντας σε απώλεια κύλισης και κατάστασης ένθετων στοιχείων.