كيف تقوم بعرض القوائم باستخدام FlatList؟

Question

Accepted Answer

**FlatList** هو مكون React Native لعرض **قوائم البيانات القابلة للتمرير** بكفاءة. يعرض العناصر **بكسل (lazily)** (فقط ما هو مرئي)، مما يجعله فعّالاً للقوائم الطويلة — أفضل بكثير من تعيين البيانات في ScrollView. ## FlatList — قوائم فعّالة ```jsx import { FlatList, Text, View } from 'react-native'; function UserList({ users }) { return ( item.id} // unique key per item (important!) renderItem={({ item }) => ( // how to render each item {item.name} )} /> ); } ``` يأخذ FlatList مصفوفة **data**، دالة **renderItem** (لعرض كل عنصر)، و**keyExtractor** (مفاتيح فريدة) — ويعرض العناصر بكفاءة. ## لماذا FlatList (وليس ScrollView + map) ```text ❌ ScrollView with data.map(...) → renders ALL items at once (even off-screen) → slow/memory-heavy for long lists ✅ FlatList → renders only VISIBLE items lazily (virtualization); recycles as you scroll → performant for long/large lists → Use FlatList for any non-trivial list; ScrollView only for small, fixed content. ``` ## ميزات FlatList المفيدة ```text ✓ onEndReached → load more data when scrolling near the end (INFINITE SCROLL / pagination) ✓ refreshing / onRefresh → PULL-TO-REFRESH ✓ ListHeaderComponent / ListFooterComponent / ItemSeparatorComponent ✓ numColumns → grid layout; horizontal → horizontal list ✓ SectionList → for sectioned/grouped lists ``` ## لماذا يهمك ذلك فهم FlatList ضروري لأن **عرض قوائم البيانات هو احتياج عام تقريباً** في التطبيقات، و FlatList هو الطريقة الفعّالة والقياسية للقيام بذلك في React Native، لذلك هو معرفة ضرورية. كل تطبيق تقريباً يعرض قوائم (تغذيات المحتوى، الرسائل، نتائج البحث)، والقيام بذلك بكفاءة مهم جداً. الفكرة الأساسية هي أن **FlatList يعرض العناصر بكسل** (فقط ما هو مرئي، عبر المعالجة الافتراضية وإعادة الاستخدام أثناء التمرير) — مما يجعله فعّالاً للقوائم الطويلة، بخلاف الخطأ الشائع المتمثل في استخدام **ScrollView مع `data.map()`** الذي يعرض جميع العناصر مرة واحدة (حتى تلك خارج الشاشة)، مما يسبب بطء ومشاكل في الذاكرة للقوائم الطويلة. فهم **استخدام FlatList لأي قائمة غير بسيطة** (و ScrollView فقط للمحتوى الصغير والثابت) هو معرفة عملية مهمة تمنع مشاكل الأداء الحقيقية. فهم الاستخدام الأساسي (مصفوفة `data`، دالة `renderItem`، و`keyExtractor` للمفاتيح الفريدة) ضروري لعرض القوائم. فهم **الميزات المفيدة** — `onEndReached` (للتمرير اللانهائي/التقسيم إلى صفحات، تحميل المزيد من البيانات بالقرب من النهاية — احتياج شائع جداً)، السحب للتحديث، مكونات الرأس والتذييل والفاصل، التخطيطات الشبكية والأفقية، و SectionList للقوائم المجمعة — يغطي المتطلبات الشائعة للقوائم التي تحتاجها التطبيقات. نظراً لأن عرض القوائم بكفاءة هو متطلب تطبيق عام تقريباً و FlatList (مع معالجته الكسولة/المعالجة الافتراضية) هو الحل الفعّال والقياسي لـ React Native — أفضل بكثير من النهج الساذج ScrollView+map — فإن فهم FlatList هو معرفة React Native ضرورية وتُطبق بشكل متكرر — مكون أساسي يُستخدم في كل تطبيق تقريباً لعرض قوائم البيانات، حيث يكون فهم معالجته الكسولة الفعّالة والميزات المتعلقة به (مثل التمرير اللانهائي والسحب للتحديث) أساسياً لبناء قوائم فعّالة وفعّالة الأداء، مهارة قياسية لتطوير React Native.