ما هي معمارية FlashList من Shopify وما الذي تحسّنه مقارنة بـ FlatList؟

الإجابة المختصرة

تقوم FlashList بإعادة تدوير خلايا الـ Native Views القائمة واستبدال محتواها الداخلي فقط (Cell Recycling) بدلاً من تدمير وإنشاء مكونات جديدة عند التمرير.

الشرح

عند التمرير في FlatList تُنشأ عناصر جديدة وتُدمَّر القديمة، مما قد يسبب فراغات بيضاء عند التمرير السريع وضغطًا مستمرًا على الذاكرة. تعتمد FlashList على إعادة تدوير الخلايا (Cell Recycling) كما في RecyclerView في أندرويد و UICollectionView في iOS، فتعيد استخدام نفس الـ views بمحتوى جديد. في الإصدار v1 كان يلزم تحديد estimatedItemSize، أما في FlashList v2 (المبنية للمعمارية الجديدة) فلم تعد مطلوبة لأن القياس يتم تلقائيًا. وتختلف نسبة التحسن حسب القائمة والجهاز، لذلك قِسها في تطبيقك بدل الاعتماد على أرقام عامة.

مثال بالكود

import { FlashList } from "@shopify/flash-list";

function ProductFeed({ items }: { items: Product[] }) {
  return (
    <FlashList
      data={items}
      renderItem={({ item }) => <ProductRow item={item} />}
      getItemType={(item) => item.kind}   // recycle only cells of the same type
      // FlashList v1 only: estimatedItemSize={100}
    />
  );
}

أخطاء شائعة

• إهمال getItemType عندما تحتوي القائمة على أنواع خلايا مختلفة، فتُعاد تدوير خلايا غير متطابقة وتضيع الفائدة.
• الاعتماد على الإصدار v1 دون ضبط estimatedItemSize بقيمة قريبة من الارتفاع الحقيقي مما يربك حسابات شريط التمرير.

أسئلة متابعة

• ما هي خاصية removeClippedSubviews ومتى يكون تفعيلها سلاحاً ذا حدين؟

المصادر

• FlashList — documentation