SectionList: mi ez, szekciók struktúrája és API React Native-ban

Mi az a SectionList?

SectionList — React Native komponens logikai szekciókba csoportosított adatok megjelenítésére. Minden szekciónak van egy címe és elemlistája, ami ideális az ábécé szerinti kapcsolatokhoz, kategóriánkénti menükhöz, dátum szerinti rendelésekhez. A komponens a VirtualizedList-re épül és örökli a virtualizáció összes előnyét.

A SectionList a FlatList-tel együtt jelent meg a React Native 0.43-ban, és azóta a kategorizált listák szabványa. A Meta adatai szerint (2026) a React Native projektek 40%-a használja a SectionList-et strukturált adatok rendezésére. A FlatList-en belüli kézi csoportosítással ellentétben a SectionList beépített támogatást nyújt a szekciókhoz.

Fő használati forgatókönyvek

SectionList alkalmazása kapcsolati listákban alfabetikus indexszel, ahol minden betű külön szekció. Az e-kereskedelemben a komponens termékeket csoportosít kategória vagy márka szerint. Jegyzetalkalmazásokban — dátum vagy címkék szerint. Beállításokban — szekciónként (Alapvető, Biztonság, Értesítések).

A React Native használatának kutatása szerint (Meta, 2026) a SectionList 5–50 szekcióval és szekciónként 3–20 elemmel a leghatékonyabb. Kevesebb szekció esetén egyszerűbb a FlatList használata csoportosítással a ListHeaderComponent-en keresztül. Több szekció esetén — teljesítményproblémák merülnek fel a nagyszámú cím miatt.

Adatstruktúra és szekciók

SectionList Data Section objektumok tömbjét fogadja, amelyek mindegyike tartalmaz egy title-t (szekció címe) és egy data-t (elemek tömbje). Ezenkívül minden szekcióhoz külön átadható key és renderItem, felülírva az általános renderItem-et.

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

renderSectionHeader — a szekció címének megjelenítő függvénye, amely megkapja a szekció objektumot. renderItem — az elem megjelenítő függvénye, hasonló a FlatList-hez. A komponens támogatja a renderSectionFooter-t is minden szekció alsó részéhez.

<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 és navigáció a szekciók között

Sticky headers — a SectionList legfontosabb jellemzője. Amikor a felhasználó görget, az aktuális szekció címe a képernyő felső széléhez tapad, amíg a szekció teljesen el nem görül. Ez állandó kontextust biztosít a felhasználó számára az aktuális kategóriáról.

A sticky mód alapértelmezés szerint be van kapcsolva. Kikapcsolásához használja a stickySectionHeadersEnabled={false} beállítást. iOS-en a címek natív animációval tapadnak, Androidon — JS-en keresztül. Alfabetikus névjegyzékekhez kényelmes oldalsávot hozzáadni betűkkel a gyors navigációhoz.

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 — metódus programozott navigációhoz bármely szekcióba. Elfogadja a sectionIndex, itemIndex és viewPosition értékeket (0 — eleje, 0.5 — közepe, 1 — vége). Az oldalsó alfabetikus indexszel kombinálva gyors navigáció valósítható meg, mint a szabvány iOS kapcsolatokban.

A SectionList teljesítményének optimalizálása

A SectionList optimalizálása ugyanazokat az elveket követi, mint a FlatList optimalizálása, kiegészítve a szekciókkal kapcsolatos további részletekkel. Minden szekciócím egy további View, amely megjelenítésre és újramegjelenítésre kerül görgetés közben. 50+ szekciónál a címek lassíthatják a görgetést.

Használja a React.memo-t a renderSectionHeader és renderItem számára a szükségtelen újramegjelenítések elkerüléséhez. Ha a szekciók nem változnak dinamikusan, fontolja meg a useMemo használatát a sections tömb számára. Nagyon nagy listák esetén kombinálja a SectionList-et a getItemLayout-tal, megadva a címek és elemek rögzített magasságát.

SectionList vs FlatList: mikor mit válasszon

A választás a SectionList és a FlatList között az adatstruktúrától függ. Ha az adatok lapos tömböt képeznek — használja a FlatList-et. Ha az adatok természetesen kategóriákba csoportosulnak címekkel — SectionList. Ne használja a SectionList-et egyetlen szekcióhoz — a FlatList hatékonyabb lesz.

A teljesítménykülönbség minimális azonos elemszám esetén. A SectionList többletterhelést ad a címek megjelenítéséhez, de ez a többletterhelés akkor indokolt, ha a címek jelentéssel bírnak. Ha nincs szükség címekre — a FlatList ListHeaderComponent-tel a szekciók szimulálásához gyorsabb lesz.

Választási kritériumok

Használja a SectionList-et, amikor: az adatok alapértelmezés szerint csoportosítottak (kapcsolatok betű szerint), sticky headers szükségesek, a szekciócímek interaktív elemeket tartalmaznak (gombok, jelölőnégyzetek). Használja a FlatList-et, amikor: az adatok laposak, a csoportosítás dinamikusan változik, a kategóriák száma több mint 50 és a címek egységesek.

SectionList implementációs példák

SectionList alfabetikus indexszel — klasszikus használati példa. Az implementáció tartalmaz egy oldalsávot betűkkel és scrollToLocation-t a szekcióhoz ugráshoz. Alább a kapcsolati lista teljes implementációja alfabetikus navigációval.

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>
  );
};

Fontos: a szekciók dinamikus szűrésekor használja a useMemo-t a tömb stabilizálásához. Memoizálás nélkül a SectionList minden szűrőváltozáskor újra létrehozza az összes cellát, ami a görgetés és a beágyazott komponensek állapotának elvesztéséhez vezet.