يبدأ سجلّ Trailhead بنحو اثنتي عشرة رحلة. المتنزّه المتحمّس يسجّل ثلاث رحلات أسبوعيًا؛ وبعد أربع سنوات يتجاوز السجلّ 600 صف، لكلٍّ منها صورة مصغّرة وعنوان وبعض الإحصاءات. اعرض ذلك باستخدام ScrollView و.map()، وسيبني التطبيق الـ native views لكل صف قبل أن يعرض أول إطار. على هاتف رائد قد لا تلاحظ. أما على هواتف Android متوسطة الفئة التي يستخدمها معظم العالم، فستحصل على شاشة فارغة وتقطّع.
يأخذ FlatList بياناتك ودالة ترسم عنصرًا واحدًا، ولا يركّب إلا الصفوف القريبة من منطقة العرض:
import { FlatList, Text, View } from 'react-native';\nimport { HikeRow } from '../components/HikeRow';\nimport { useHikes } from '../state/hikes';\n\nexport default function HikeLog() {\n const hikes = useHikes();\n\n return (\n <FlatList\n data={hikes}\n keyExtractor={(hike) => hike.id}\n renderItem={({ item }) => <HikeRow hike={item} />}\n ItemSeparatorComponent={() => <View style={{ height: 1, backgroundColor: '#e2e8e4', marginLeft: 80 }} />}\n ListEmptyComponent={<Text style={{ padding: 24, textAlign: 'center' }}>No hikes yet. Log your first one!</Text>}\n contentContainerStyle={{ paddingBottom: 24 }}\n />\n );\n}مثل ScrollView، يحتاج FlatList إلى ارتفاع محدود، لذا يجب أن يعطيه أبوه flex: 1 (والشاشة في Expo Router تفعل ذلك أصلًا). تستقبل renderItem الكائن { item, index }. ويتيح لك ListHeaderComponent وListFooterComponent أن تتمرّر بطاقة ملخّص أو مؤشّر «تحميل المزيد» مع القائمة، بدلًا من تغليف الـ FlatList داخل ScrollView، وهذا يُبطل الـ virtualization كليًا ويُطلق تحذيرًا.
يحتفظ FlatList بـ نافذة رسم (render window): الصفوف الظاهرة على الشاشة، زائد مخزون احتياطي فوقها وتحتها. وأثناء التمرير، تُركَّب الصفوف التي تدخل النافذة وتُزال التي تخرج منها، ويحلّ محلّها فراغ بالارتفاع الصحيح.
\nينتج عن ذلك أمران. أولًا، يجب أن تكون المفاتيح (keys) ثابتة: يستخدمها FlatList وReact لمعرفة أي صفّ هو أي صفّ بينما تأتي الصفوف وتذهب، فاستخدم معرّفًا من بياناتك. فهارس المصفوفة تنكسر لحظة إدراج رحلة جديدة في الأعلى. ثانيًا، الصفوف تنسى الـ state المحلية حين تُزال. علامة «موسَّع» المحفوظة في useState داخل الصف تعود إلى قيمتها الأولى بعد تمرير طويل. ارفع هذه الـ state إلى الأب (expandedId) أو إلى بياناتك.
معظم التقطّع في القوائم يأتي من إعادة الـ render لصفوف لم تتغيّر، أو من عمل ثقيل داخلها. بالترتيب بحسب العائد:
\nHikeRow مغلّفًا بـ memo، فلا يُعاد الـ render للصف إلا حين يتغيّر الـ prop المسمّى hike. (إن كان مشروعك يفعّل React Compiler، فهو يتولّى الـ memoization نيابةً عنك.)renderItem ثابتة. الدالة السهمية المباشرة لا بأس بها مع صفّ مغلّف بـ memo، لكن لا تنشئ كائنات جديدة للـ props في كل render، مثل style={{…}} أو hike={{ ...item }}، فهي تُبطل memo.expo-image مع التخزين المؤقت.getItemLayout. إن كان كل صف 72 نقطة زائد فاصل بنقطة واحدة، يستطيع FlatList تخطّي القياس:const ROW = 73;\n\n<FlatList\n // …\n getItemLayout={(_, index) => ({ length: ROW, offset: ROW * index, index })}\n/>وللسجلّات المحفوظة على خادم، لا تجلب الرحلات الـ 600 كلها دفعة واحدة. يُطلَق onEndReached حين يقترب المستخدم من الأسفل بالتمرير (ومدى الاقتراب يحدّده onEndReachedThreshold، ويُقاس بارتفاعات الشاشة)، وهذه هي اللحظة لطلب الصفحة التالية وإلحاقها بـ data. اعرض مؤشّر تحميل في ListFooterComponent أثناء التحميل، واحمِ الكود من إطلاق الطلب مرتين.
ضبط windowSize وinitialNumToRender يأتي في النهاية، وبعد أن تقيس فقط. وللقوائم الضخمة جدًا أو المعقّدة، تنتقل فرق كثيرة إلى FlashList من Shopify، الذي يعيد تدوير views الصفوف بدلًا من تركيب صفوف جديدة، ويحافظ على واجهة برمجية شبيهة بـ FlatList.
يجمّع Trailhead الرحلات بحسب الشهر، مع ترويسة لاصقة لكل شهر. يفعل SectionList ذلك انطلاقًا من بيانات بهذا الشكل:
const sections = [\n { title: 'October 2026', data: [ridgeLoop, lakeTrail] },\n { title: 'September 2026', data: [oldMill] },\n];<SectionList\n sections={sections}\n keyExtractor={(hike) => hike.id}\n renderItem={({ item }) => <HikeRow hike={item} />}\n renderSectionHeader={({ section }) => <Text style={styles.header}>{section.title}</Text>}\n stickySectionHeadersEnabled\n/>الجزء المثير للاهتمام ليس الـ component؛ بل تحويل مصفوفة مسطّحة من الرحلات إلى شكل sections هذا، مرتّبة بشكل صحيح. وهذا هو تمرينك.
يبدأ القسم 3 بعد ذلك: مع وجود شاشات حقيقية للتنقّل بينها، يحتاج Trailhead إلى نظام تنقّل (navigation).
\n","toc":[{"id":"sec-1","text":"FlatList: ارسم ما هو مرئي","level":2},{"id":"sec-2","text":"كيف يعمل الـ virtualization","level":2},{"id":"sec-3","text":"الحفاظ على السلاسة","level":2},{"id":"sec-4","text":"SectionList: بيانات مجمّعة","level":2}],"takeaways":["ScrollView مع .map() يركّب (mount) كل الصفوف دفعة واحدة؛ أما FlatList فيركّب فقط نافذة من الصفوف حول الجزء المرئي.","أعطِ FlatList دالة keyExtractor تُرجع معرّفًا ثابتًا من بياناتك، لا فهرس المصفوفة أبدًا.","الصفوف في القائمة الافتراضية (virtualized) تُزال حين تبتعد بالتمرير، لذا احفظ state الصف في بياناتك، لا داخل component الصف.","طبّق memo على component الصف، وأبقِ renderItem ثابتة، وأضف getItemLayout حين يكون لكل الصفوف الارتفاع نفسه.","يأخذ SectionList الخاصية sections بشكل { title, data } ويعرض قوائم مجمّعة بترويسات لاصقة."],"further":[{"title":"FlatList","url":"https://reactnative.dev/docs/flatlist"},{"title":"SectionList","url":"https://reactnative.dev/docs/sectionlist"},{"title":"Optimizing FlatList Configuration","url":"https://reactnative.dev/docs/optimizing-flatlist-configuration"}],"quiz":[{"q":"في سجلّ Trailhead ستمئة رحلة تُعرض باستخدام ScrollView و.map(). تستغرق الشاشة ثلاث ثوانٍ لتظهر على هاتف Android قديم. لماذا؟
لكل صفّ رحلة useState محلية للحالة «موسَّع». يوسّع المستخدمون صفًّا، ثم يمرّرون بعيدًا إلى الأسفل، ثم يعودون، فيجدونه مطويًّا من جديد. لماذا؟
expandedId في الأب أو في بياناتك ومرّرها إلى الأسفل."},{"text":"تُرجع keyExtractor مفاتيح مكرّرة، فأعادت React استخدام الصف الخطأ.","why":"المفاتيح المكرّرة تجعل صفوفًا خاطئة تتحدّث، لا تعيد ضبط الـ state عند التمرير. وستحذّرك React أيضًا."},{"text":"يعيد FlatList ترتيب البيانات كلما مرّرت.","why":"لا يغيّر FlatList ترتيب بياناتك أبدًا. هو يقرّر فقط أي الصفوف يركّب."}],"answer":0},{"q":"ارتفاع كل صفّ في Trailhead 72 نقطة بالضبط. أيّ prop يتيح لـ FlatList تخطّي قياس الصفوف والقفز مباشرة إلى الصف 400؟
","options":[{"text":"initialNumToRender","why":"يتحكّم في عدد الصفوف التي تُرسم في الدفعة الأولى؛ ولا يخبر FlatList بأي شيء عن أحجامها."},{"text":"getItemLayout","why":"صحيح. حين تكون length وoffset معروفتين مسبقًا، لا يقيس FlatList الصفوف، وتعمل scrollToIndex حتى مع الصفوف التي لم تُرسم بعد."},{"text":"removeClippedSubviews","why":"يفصل الـ views الواقعة خارج الشاشة عن شجرة العناصر الأصلية. قد يوفّر ذاكرة، لكنه لا يقول شيئًا عن أحجام الصفوف."},{"text":"windowSize","why":"يتحكّم في عدد الشاشات من الصفوف التي تبقى مركّبة حول منطقة العرض، لا في طريقة قياسها."}],"answer":1}],"exercise":{"kind":"web","mode":"js","starter":{"js":"const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n\nconst hikes = [\n { id: 'h1', name: 'Ridge Loop', date: '2026-10-04', distanceKm: 8.4 },\n { id: 'h2', name: 'Old Mill Creek', date: '2026-09-12', distanceKm: 5.1 },\n { id: 'h3', name: 'Lake Trail', date: '2026-10-19', distanceKm: 11.2 },\n { id: 'h4', name: 'Eagle Point', date: '2025-10-02', distanceKm: 14.0 },\n { id: 'h5', name: 'Fern Gully', date: '2026-09-28', distanceKm: 3.6 },\n];\n\n// Return SectionList sections: [{ title: 'October 2026', data: [...] }, ...]\nfunction groupHikesByMonth(hikes) {\n const sections = {};\n for (const hike of hikes) {\n const month = MONTHS[Number(hike.date.slice(5, 7))];\n if (!sections[month]) sections[month] = [];\n sections[month].push(hike);\n }\n return Object.keys(sections).map((title) => ({ title, data: sections[title] }));\n}\n\nconsole.log(JSON.stringify(groupHikesByMonth(hikes), null, 2));\n"},"solution":{"js":"const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n\nconst hikes = [\n { id: 'h1', name: 'Ridge Loop', date: '2026-10-04', distanceKm: 8.4 },\n { id: 'h2', name: 'Old Mill Creek', date: '2026-09-12', distanceKm: 5.1 },\n { id: 'h3', name: 'Lake Trail', date: '2026-10-19', distanceKm: 11.2 },\n { id: 'h4', name: 'Eagle Point', date: '2025-10-02', distanceKm: 14.0 },\n { id: 'h5', name: 'Fern Gully', date: '2026-09-28', distanceKm: 3.6 },\n];\n\nfunction groupHikesByMonth(hikes) {\n const sorted = [...hikes].sort((a, b) => b.date.localeCompare(a.date));\n const sections = [];\n for (const hike of sorted) {\n const year = hike.date.slice(0, 4);\n const month = MONTHS[Number(hike.date.slice(5, 7)) - 1];\n const title = `${month} ${year}`;\n const last = sections[sections.length - 1];\n if (last && last.title === title) last.data.push(hike);\n else sections.push({ title, data: [hike] });\n }\n return sections;\n}\n\nconsole.log(JSON.stringify(groupHikesByMonth(hikes), null, 2));\n"},"checks":[{"id":"titles","test":"const sample = [{ id: 'a', date: '2026-10-04' }, { id: 'b', date: '2026-09-12' }, { id: 'c', date: '2026-10-19' }, { id: 'd', date: '2025-10-02' }, { id: 'e', date: '2026-09-28' }]; const s = groupHikesByMonth(sample); return Array.isArray(s) && s.map((x) => x.title).join('|') === 'October 2026|September 2026|October 2025';"},{"id":"items-newest-first","test":"const sample = [{ id: 'a', date: '2026-10-04' }, { id: 'b', date: '2026-09-12' }, { id: 'c', date: '2026-10-19' }, { id: 'd', date: '2025-10-02' }, { id: 'e', date: '2026-09-28' }]; const s = groupHikesByMonth(sample); return s[0].data.map((h) => h.id).join() === 'c,a' && s[1].data.map((h) => h.id).join() === 'e,b' && s[2].data.map((h) => h.id).join() === 'd';"},{"id":"january-december","test":"const s = groupHikesByMonth([{ id: 'x', date: '2026-01-31' }, { id: 'y', date: '2025-12-01' }]); return s.length === 2 && s[0].title === 'January 2026' && s[1].title === 'December 2025';"},{"id":"no-mutation","test":"const sample = [{ id: 'a', date: '2026-10-04' }, { id: 'b', date: '2026-09-12' }, { id: 'c', date: '2026-10-19' }, { id: 'd', date: '2025-10-02' }, { id: 'e', date: '2026-09-28' }]; const ids = sample.map((h) => h.id).join(); groupHikesByMonth(sample); return sample.map((h) => h.id).join() === ids;"},{"id":"empty","test":"const s = groupHikesByMonth([]); return Array.isArray(s) && s.length === 0;"}],"title":"جمّع الرحلات في أقسام SectionList","prompt":"اكتب groupHikesByMonth(hikes) ليتمكّن الـ SectionList في Trailhead من عرض السجلّ مجمّعًا بحسب الشهر. أرجع مصفوفة من الأقسام بالشكل { title, data } بحيث:
title هو اسم الشهر والسنة، مثل "October 2026" (استخدم المصفوفة MONTHS)،التواريخ نصوص بصيغة YYYY-MM-DD. في الكود المبدئي عدّة أخطاء؛ شغّله وقارن مخرجاته بما تحتاج إليه القائمة.
MONTHS تبدأ فهارسها من الصفر، لكن الشهر في '2026-10-04' هو 10. والعنوان يحتاج إلى السنة أيضًا.","إن رتّبت نسخة من الرحلات من الأحدث أولًا ([...hikes].sort((a, b) => b.date.localeCompare(a.date)))، فإن نصوص التاريخ بصيغة ISO تُقارَن بشكل صحيح كنصوص.","بعد الترتيب، مرّ على الرحلات مرة واحدة: إن طابق عنوان الرحلة عنوان آخر قسم، أضفها إليه؛ وإلا فابدأ قسمًا جديدًا. وعندها ينتج ترتيب الأقسام من الترتيب نفسه."],"explanation":"استخدم الكود المبدئي فهرس شهر خاطئًا (بفارق واحد)، وأسقط السنة فاندمج October 2025 في October 2026، واعتمد على ترتيب مفاتيح الكائن، وهو يتبع ترتيب الإدراج لا التاريخ. ترتيب نسخة أولًا ثم تجميع الرحلات المتتالية يحلّ ترتيب الأقسام والعناصر معًا في مرور واحد، ويترك مصفوفة المستدعي دون مساس. ونصوص ISO بصيغة YYYY-MM-DD تُرتَّب زمنيًا كنصّ عادي، وهذا يتجنّب مفاجآت المناطق الزمنية التي تأتي من new Date(). احسب هذا حين تتغيّر البيانات (مثلًا داخل useMemo)، لا داخل renderItem.