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 ще пресъздава всички клетки при всяка промяна на филтъра, което води до загуба на скролване и състояние на вложени компоненти.