FlatList: ما هي، API والتحسين في React Native

ما هي FlatList؟

FlatList هو مكون React Native يطبق قائمة افتراضية مع عرض عالي الأداء لمجموعات البيانات الكبيرة. المكون مبني فوق VirtualizedList ويوفر API تصريحية لإنشاء قوائم مسطحة بأي درجة من التعقيد.

تم تقديم FlatList في React Native 0.43 كبديل لـ ListView القديم. وفقًا لـ Meta (2026)، يُستخدم FlatList في 85% من تطبيقات React Native التي تعمل مع القوائم. يدعم المكون جميع السيناريوهات الشائعة: جهات الاتصال، خلاصات الأخبار، كتالوجات المنتجات والمحادثات.

التاريخ والمكان في النظام البيئي

قبل FlatList، كان المطورون يستخدمون ListView الذي يتطلب تهيئة يدوية لإعادة استخدام الخلايا. قام FlatList بأتمتة هذه العملية من خلال تطبيق العرض بنوافذ المشابه لـ RecyclerView في Android (2014) و UICollectionView في iOS (2012). في المشاريع الحديثة، FlatList هو المعيار الفعلي لأي قائمة.

كيف يعمل التخيل الافتراضي في FlatList

التخيل الافتراضي في FlatList هو آلية حيث يقوم المكون بعرض العناصر التي تقع ضمن المنطقة المرئية من الشاشة فقط، بالإضافة إلى مخزن مؤقت صغير على كل جانب. لا يتم إنشاء العناصر المتبقية في DOM، مما يوفر الذاكرة ويسرع العرض.

عند التمرير، يعيد FlatList استخدام خلايا View المنشأة بالفعل، مستبدلاً بياناتها. هذا يمنع إنشاء آلاف الـ Views لقائمة من 10,000 عنصر. حجم المخزن المؤقت الافتراضي هو 10 عناصر فوق وتحت المنطقة المرئية، لكنه قابل للتكوين عبر windowSize.

التكوين الأمثل لهذه المعاملات يسمح بالموازنة بين سلاسة التمرير واستهلاك الذاكرة. للقوائم ذات العناصر الكبيرة، يُوصى بتقليل windowSize إلى 5-7.

API والخصائص الرئيسية لـ FlatList

API FlatList تشمل مجموعة من الخصائص لتكوين عرض وسلوك القائمة. الخاصيتان الإجباريتان هما data (مصفوفة البيانات) و renderItem (دالة عرض العناصر). keyExtractor يحسن الأداء من خلال توفير مفتاح فريد لكل عنصر.

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 يضيف فاصلًا بين العناصر، ListHeaderComponent و ListFooterComponent يضيفان رأس وتذييل القائمة. هذا يسمح بإنشاء تخطيطات معقدة دون أغلفة إضافية.

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

تحسين أداء FlatList

تحسين FlatList أمر بالغ الأهمية للتطبيقات التي تحتوي على مئات وآلاف العناصر. بدون التكوين الصحيح، قد تبطئ القائمة أثناء التمرير، وتستهلك ذاكرة زائدة، وتتسبب في أعطال على الأجهزة الضعيفة.

القاعدة الأولى هي استخدام keyExtractor بمعرفات فريدة ومستقرة. استخدام الفهارس كمفاتيح يؤدي إلى إعادة استخدام غير صحيحة للخلايا وأخطاء في الحالة. القاعدة الثانية هي تغليف renderItem في useCallback واستخدام React.memo لمكون العنصر.

getItemLayout للارتفاع الثابت

إذا كانت جميع العناصر لها نفس الارتفاع، فإن getItemLayout يسمح لـ FlatList بحساب موضع التمرير دون قياس المكونات. هذا يوفر زيادة كبيرة في الأداء، خاصة عند التمرير إلى فهرس معين.

const ITEM_HEIGHT = 80;

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

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

useMemo للبيانات يمنع إعادة العرض غير الضرورية. إذا جاءت البيانات من API، قم بتحويلها مرة واحدة وتخزينها مؤقتًا. استخدم React.memo لمكون العنصر لتجنب عرض العناصر غير المتغيرة.

القوائم الأفقية والدوارات

FlatList الأفقي يتم إنشاؤه بإضافة الخاصية horizontal={true}. تغير القائمة اتجاه التمرير إلى المحور X، وهو مناسب لدوارات المنتجات ومعارض الصور والقوائم الأفقية.

في الوضع الأفقي، من المهم تكوين snapToInterval و snapToAlignment بشكل صحيح للتمرير خطوة بخطوة كما في الدوارات الأصلية. يتعامل المكون تلقائيًا مع الزخم ورفع الإصبع، ويتوقف عند أقرب عنصر.

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

onViewableItemsChanged هو استدعاء يُفعّل عندما تتغير العناصر المرئية. يُستخدم للتحليلات والتحميل البطيء للصور وتشغيل الفيديو فقط للبطاقات المرئية.

السحب للتحديث والتحميل اللانهائي

السحب للتحديث في FlatList يُطبّق عبر الخاصيتين refreshing و onRefresh، اللتين تعملان مع حالة التحميل. عند سحب القائمة لأسفل، يتم استدعاء onRefresh، ويقوم علم refreshing بحظر الاستدعاءات المتكررة.

التحميل اللانهائي يُكوّن عبر onEndReached — استدعاء يُفعّل عند الاقتراب من نهاية القائمة. onEndReachedThreshold يحدد عدد العناصر قبل النهاية التي يتم فيها تشغيل الحدث. عادةً ما يُستخدم التقسيم المبني على المؤشر.

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

هام: قد يتم استدعاء onEndReached عدة مرات. أضف علم isLoading لحظر الطلبات المتكررة حتى ينتهي الطلب السابق. استخدم ActivityIndicator في ListFooterComponent للإشارة إلى التحميل.