FlatList: nima, API va React Native-da optimallashtirish

FlatList nima?

FlatList — katta hajmdagi ma'lumotlarni samarali renderlash bilan virtualizatsiya qilingan ro'yxatni amalga oshiruvchi React Native komponenti. Komponent VirtualizedList asosida qurilgan va har qanday murakkablikdagi tekis ro'yxatlarni yaratish uchun deklarativ API taqdim etadi.

FlatList React Native 0.43 da eskirgan ListView o'rnini bosuvchi sifatida paydo bo'ldi. Meta ma'lumotlariga ko'ra (2026), FlatList ro'yxatlar bilan ishlaydigan React Native ilovalarining 85 foizida qo'llaniladi. Komponent barcha keng tarqalgan stsenariylarni qo'llab-quvvatlaydi: kontaktlar, yangiliklar lentasi, mahsulot kataloglari, chatlar.

Tarix va ekotizimdagi o'rni

FlatList paydo bo'lishidan oldin dasturchilar hujayralarni qayta ishlatishni qo'lda sozlashni talab qiladigan ListView-dan foydalanishgan. FlatList bu jarayonni avtomatlashtirdi, Android-da RecyclerView (2014) va iOS-da UICollectionView (2012) ga o'xshash oynali renderlashni joriy qildi. Zamonaviy loyihalarda FlatList har qanday ro'yxatlar uchun de-fakto standartdir.

FlatList virtualizatsiyasi qanday ishlaydi

FlatList virtualizatsiyasi — komponent faqat ekranning ko'rinadigan qismidagi elementlarni va har tomondan kichik buferni render qiladigan mexanizm. Qolgan elementlar DOM-da yaratilmaydi, bu xotirani tejaydi va renderlashni tezlashtiradi.

Siljitish paytida FlatList allaqachon yaratilgan View hujayralarini qayta ishlatadi, ulardagi ma'lumotlarni almashtiradi. Bu 10 000 elementli ro'yxat uchun minglab View-larning yaratilishini oldini oladi. Standart bufer hajmi ko'rinadigan maydondan yuqorida va pastda 10 element, lekin windowSize orqali sozlanishi mumkin.

Ushbu parametrlarning optimal sozlamasi siljitish silliqligi va xotira iste'moli o'rtasida muvozanat yaratishga imkon beradi. Katta elementli ro'yxatlar uchun windowSize ni 5-7 gacha kamaytirish tavsiya etiladi.

FlatList API va asosiy proplar

FlatList API ro'yxatning ko'rinishi va xatti-harakatini sozlash uchun proplar to'plamini o'z ichiga oladi. Ikkita majburiy prop — data (ma'lumotlar massivi) va renderItem (elementni renderlash funksiyasi). keyExtractor har bir element uchun noyob kalit taqdim etish orqali unumdorlikni oshiradi.

import React from 'react';
import { FlatList, View, Text, StyleSheet } from 'react-native';

const App = () => {
  const data = Array.from({ length: 100 }, (_, i) => ({
    id: i.toString(),
    title: `Item #${i + 1}`,
  }));

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text>{item.title}</Text>
        </View>
      )}
      keyExtractor={item => item.id}
      ItemSeparatorComponent={() => <View style={styles.separator} />}
    />
  );
};

ItemSeparatorComponent elementlar orasiga ajratgich qo'shadi, ListHeaderComponent va ListFooterComponent — ro'yxatning sarlavhasi va pastki qismi. Bu qo'shimcha o'rashsiz murakkab maketlar yaratishga imkon beradi.

const styles = StyleSheet.create({
  item: {
    padding: 16,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  separator: {
    height: 1,
    backgroundColor: '#ccc',
  },
});

FlatList unumdorligini optimallashtirish

FlatList optimallashtirish yuzlab va minglab elementlarga ega ilovalar uchun juda muhimdir. To'g'ri sozlanmasa, ro'yxat siljitishda sekinlashishi, ortiqcha xotira sarflashi va kuchsiz qurilmalarda ishdan chiqishi mumkin.

Birinchi qoida — noyob va barqaror identifikatorlar bilan keyExtractor dan foydalanish. Indekslarni kalit sifatida ishlatish hujayralarning noto'g'ri qayta ishlatilishiga va holat xatolariga olib keladi. Ikkinchisi — renderItem ni useCallback ga o'rash va element komponenti uchun React.memo dan foydalanish.

Ruxsat etilgan balandlik uchun getItemLayout

Agar barcha elementlar bir xil balandlikka ega bo'lsa, getItemLayout FlatList ga komponentlarni o'lchamasdan siljitish o'rnini hisoblash imkonini beradi. Bu, ayniqsa, ma'lum bir indeksga siljitishda sezilarli unumdorlik o'sishini beradi.

const ITEM_HEIGHT = 80;

const getItemLayout = (data, index) => ({
  length: ITEM_HEIGHT,
  offset: ITEM_HEIGHT * index,
  index,
});

<FlatList
  data={data}
  getItemLayout={getItemLayout}
  renderItem={renderItem}
/FlatList>

Ma'lumotlar uchun useMemo keraksiz qayta renderlashlarni oldini oladi. Agar ma'lumotlar API dan kelsa, ularni bir marta o'zgartiring va keshlang. O'zgarmagan elementlarning renderlanishini oldini olish uchun element komponenti uchun React.memo dan foydalaning.

Gorizontal ro'yxatlar va karusellar

Gorizontal FlatList horizontal={true} propini qo'shish orqali yaratiladi. Ro'yxat siljitish yo'nalishini X o'qiga o'zgartiradi, bu mahsulot karusellari, rasm galereyalari va gorizontal menyular uchun qulaydir.

Gorizontal rejimda bosqichli siljitish uchun snapToInterval va snapToAlignment ni to'g'ri sozlash muhim, xuddi native karusellardagi kabi. Komponent avtomatik ravishda tezlik va barmoqni qo'yib yuborishni boshqaradi, eng yaqin elementda to'xtaydi.

<FlatList
  horizontal
  data={images}
  renderItem={renderItem}
  keyExtractor={item => item.id}
  showsHorizontalScrollIndicator={false}
  snapToInterval={CARD_WIDTH + GAP}
  snapToAlignment="start"
  decelerationRate="fast"
  pagingEnabled
  onViewableItemsChanged={onViewableItemsChanged}
/>

onViewableItemsChanged — ko'rinadigan elementlar o'zgarganda chaqiriladigan callback. Analitika, tasvirlarni kech yuklash va faqat ko'rinadigan kartalar uchun videoni faollashtirish uchun ishlatiladi.

Pull-to-refresh va cheksiz yuklash

Pull-to-refresh FlatList da refreshing va onRefresh proplari orqali amalga oshiriladi, yuklash holati bilan birga ishlaydi. Ro'yxatni pastga tortganda onRefresh chaqiriladi va refreshing flagi takroriy chaqiruvlarni bloklaydi.

Cheksiz yuklash (infinite scroll) onEndReached orqali sozlanadi — ro'yxat oxiriga yaqinlashganda ishga tushadigan callback. onEndReachedThreshold hodisani ishga tushirish uchun oxirdan nechta element qolganligini aniqlaydi. Paginatsiya uchun odatda cursor-based yondashuv ishlatiladi.

const ListWithPagination = () => {
  const [data, setData] = React.useState([]);
  const [page, setPage] = React.useState(1);
  const [refreshing, setRefreshing] = React.useState(false);

  const loadMore = React.useCallback(async () => {
    const newData = await fetchPage(page);
    setData(prev => [...prev, ...newData]);
    setPage(p => p + 1);
  }, [page]);

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item.id}
      refreshing={refreshing}
      onRefresh={loadMore}
      onEndReached={loadMore}
      onEndReachedThreshold={0.5}
    />
  );
};

Muhim: onEndReached bir necha marta chaqirilishi mumkin. Avvalgi so'rov tugamaguncha takroriy so'rovlarni bloklash uchun isLoading flagi qo'shing. Yuklashni ko'rsatish uchun ListFooterComponent da ActivityIndicator dan foydalaning.