SectionList: nədir, bölmə strukturu və API React Native-də

SectionList nədir?

SectionList — məlumatları məntiqi bölmələrdə qruplaşdırılmış şəkildə göstərmək üçün React Native komponenti. Hər bölmənin başlığı və elementlər siyahısı var, bu da əlifba üzrə kontaktlar, kateqoriyalar üzrə menyular, tarixlər üzrə sifarişlər üçün idealdır. Komponent VirtualizedList üzərində qurulmuşdur və virtualizasiyanın bütün üstünlüklərini miras alır.

SectionList FlatList ilə birlikdə React Native 0.43-də ortaya çıxdı və o vaxtdan bəri kateqoriyalaşdırılmış siyahılar üçün standartdır. Meta məlumatlarına görə (2026), React Native layihələrinin 40%-i strukturlu məlumatların təşkili üçün SectionList istifadə edir. FlatList daxilində əl ilə qruplaşdırmadan fərqli olaraq, SectionList bölmələrin daxili dəstəyini təmin edir.

Əsas istifadə ssenariləri

SectionList əlifba göstəricisi olan kontakt siyahılarında tətbiq olunur, burada hər hərflər ayrıca bölmədir. E-commerce-də komponent məhsulları kateqoriyalar və ya brendlər üzrə qruplaşdırır. Qeyd tətbiqlərində — tarixlər və ya teqlər üzrə. Parametrlərdə — bölmələr üzrə (Basic, Təhlükəsizlik, Bildirişlər).

React Native istifadəsi tədqiqatına görə (Meta, 2026), SectionList hər birində 3–20 element olan 5–50 bölmədə ən təsirli olur. Daha az bölmə sayında ListHeaderComponent vasitəsilə qruplaşdırma ilə FlatList istifadə etmək daha asandır. Daha çox bölmədə — çox sayda başlıq səbəbindən performans problemləri yaranır.

Məlumat strukturu və bölmələr

SectionList Data hər biri title (bölmə başlığı) və data (elementlər massivi) ehtiva edən Section obyektləri massivini qəbul edir. Əlavə olaraq, hər bölmə üçün ayrıca key və renderItem ötürülə bilər, ümumi renderItem-i ləğv edərək.

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

renderSectionHeader — bölmə obyektini qəbul edən bölmə başlığı render funksiyası. renderItem — FlatList-ə oxşar element render funksiyası. Komponent hər bölmənin aşağı hissəsi üçün renderSectionFooter-i də dəstəkləyir.

<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 və bölmələr üzrə naviqasiya

Sticky headers — SectionList-in əsas xüsusiyyəti. İstifadəçi sürüşdürdükdə, cari bölmənin başlığı ekranın yuxarı kənarına yapışır, bölmə tam sürüşdürülənə qədər. Bu, istifadəçiyə cari kateqoriya haqqında daimi kontekst verir.

Sticky rejimi standart olaraq aktivdir. Söndürmək üçün stickySectionHeadersEnabled={false} istifadə edin. iOS-da başlıqlar native animasiya ilə yapışır, Android-də — JS vasitəsilə. Əlifba arayış kitabları üçün sürətli naviqasiya üçün hərflər olan yan panel əlavə etmək rahatdır.

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 — istənilən bölməyə proqram naviqasiyası üçün metod. sectionIndex, itemIndex və viewPosition (0 — başlanğıc, 0.5 — mərkəz, 1 — son) qəbul edir. Yan əlifba indeksi ilə birləşdirərək, iOS standart kontaktlarında olduğu kimi sürətli naviqasiya həyata keçirilə bilər.

SectionList performansının optimallaşdırılması

SectionList optimallaşdırılması FlatList optimallaşdırılması ilə eyni prinsiplərə əsaslanır, bölmələrlə bağlı əlavə nüanslarla. Hər bölmə başlığı sürüşdürmə zamanı render və yenidən render edilən əlavə View-dir. 50+ bölmədə başlıqlar sürüşdürməni yavaş sala bilər.

Lazımsız yenidən renderlərin qarşısını almaq üçün renderSectionHeader və renderItem üçün React.memo istifadə edin. Bölmələr dinamik dəyişmirsə, sections massivi üçün useMemo nəzərdən keçirin. Çox böyük siyahılar üçün SectionList-i getItemLayout ilə birləşdirin, başlıqların və elementlərin sabit hündürlüyünü göstərin.

SectionList vs FlatList: nə vaxt hansı seçilməli

SectionList və FlatList arasında seçim məlumat strukturundan asılıdır. Məlumatlar düz massivdirsə — FlatList istifadə edin. Məlumatlar təbii olaraq başlıqlarla kateqoriyalara qruplaşırsa — SectionList. Bir bölmə üçün SectionList istifadə etməyin — FlatList daha səmərəli olacaq.

Eyni sayda elementdə performans fərqi minimaldır. SectionList başlıqların renderinə əlavə yük əlavə edir, lakin bu yük başlıqlar məna daşıdıqda əsaslandırılır. Başlıqlar lazım deyilsə — bölmələri simulyasiya etmək üçün ListHeaderComponent ilə FlatList daha sürətli olacaq.

Seçim meyarları

SectionList istifadə edin, o zaman ki: məlumatlar standart olaraq qruplaşdırılıb (hərflər üzrə kontaktlar), sticky headers lazımdır, bölmə başlıqları interaktiv elementlər ehtiva edir (düymələr, checkboxlar). FlatList istifadə edin, o zaman ki: məlumatlar düzdür, qruplaşdırma dinamik dəyişir, kateqoriyaların sayı 50-dən çoxdur və başlıqlar eyni tiplidir.

SectionList tətbiqi nümunələri

SectionList əlifba göstəricisi ilə — klassik istifadə nümunəsi. Tətbiq hərflər olan yan paneli və bölməyə keçmək üçün scrollToLocation-u əhatə edir. Aşağıda əlifba naviqasiyası ilə kontakt siyahısının tam tətbiqi verilmişdir.

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

Vacib: dinamik filtrləmə zamanı massivi sabitləşdirmək üçün useMemo istifadə edin. Memoizasiya olmadan SectionList hər filtr dəyişikliyində bütün hücrələri yenidən yaradacaq, bu da sürüşdürmənin və iç-içə komponentlərin vəziyyətinin itirilməsinə səbəb olacaq.