دمج Virtualization مع جلب البيانات

يحمّل التمرير اللانهائي مزيداً من البيانات عندما يقترب المستخدم من نهاية القائمة، بدلاً من استخدام ترقيم صفحات بأزرار صفحات صريحة. وعند دمجه مع المحاكاة الافتراضية، يتيح لك تصفح مجموعات بيانات ضخمة بسلاسة.

تعرض القائمة الصفوف المرئية فقط، بينما تُجلَب البيانات الجديدة في الخلفية قبل أن يصل المستخدم إلى أسفل القائمة مباشرةً.

تقبل مكوّنات القوائم في react-window دالة رد اتصال باسم onItemsRendered، وتُبلّغ عن فهارس العناصر المعروضة حالياً. وهي توفّر فهارس بدء وانتهاء العناصر المرئية والعناصر الإضافية.

تُعد هذه الدالة نقطة ربطك مع التمرير، إذ تتيح لك اكتشاف مدى تقدّم المستخدم في القائمة دون ربط أحداث التمرير الخام يدوياً.

لمعرفة وقت الجلب، قارن overscanStopIndex من onItemsRendered مع itemCount الحالي. فعندما تقترب نافذة العرض من نهاية البيانات المحمّلة، تكون هناك حاجة إلى المزيد.

يوفّر استخدام فهرس نهاية النطاق الإضافي مهلة قصيرة، إذ يطلق الجلب قبل أن يصل المستخدم فعلياً إلى الصف الأخير بقليل.

عندما يتجاوز فهرس النهاية حداً معيناً، كأن يكون ضمن عدد عناصر يعادل ما يظهر في شاشة واحدة من itemCount، تستدعي دالة الجلب الخاصة بك للصفحة التالية. احمِ هذا الاستدعاء حتى لا ترسل طلبات متداخلة متعددة.

يمنع استخدام علامة تحميل أو التحقق من وجود عملية جلب قيد التنفيذ إرسال طلبات مكررة أثناء تمرير المستخدم عبر منطقة التشغيل.

من الحيل الأنيقة تعيين itemCount إلى عدد العناصر المحمّلة زائد واحد ما دامت هناك بيانات إضافية. يعرض الصف الإضافي مؤشراً دوّاراً، مما يشير إلى أن الجلب جارٍ.

بمجرد وصول البيانات الجديدة، يزداد العدد ويُستبدل صف المؤشر بمحتوى حقيقي، فتتلقى واجهة المستخدم ملاحظات مرئية سلسة.

تغلّف الحزمة المصاحبة react-window-infinite-loader هذا المنطق نيابةً عنك. توفّر لها isItemLoaded وloadMoreItems وitemCount، فتستدعي دالة التحميل الخاصة بك أثناء اقتراب المستخدم من الصفوف غير المحمّلة.

وتتولى تتبّع النطاقات التي جرى تحميلها وتمنع استدعاءات التحميل المتكررة، مما يبسّط إنشاء تمرير لانهائي متين.

بالنسبة إلى الفهارس غير المحمّلة، يمكنك عرض صفوف نائبة أو هيكلية بدلاً من الفراغات. تتحقق دالة العرض مما إذا كان العنصر عند فهرس معين محمّلاً، وتعرض هيكلاً إذا لم يكن كذلك.

تحافظ الهياكل على التخطيط وتوضح تقدّم العملية، وهو ما يعطي شعوراً أفضل من المساحة الفارغة أثناء وصول الصفحة التالية.

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

يحافظ ذلك على قابلية استخدام القائمة بعد حدوث عطل عابر، ويمنح المستخدم طريقة واضحة للتعافي دون إعادة تحميل الصفحة بأكملها.

هناك أسلوبان شائعان للترقيم يزوّدان القوائم اللانهائية بالبيانات. يطلب الترقيم بالإزاحة البيانات باستخدام رقم الصفحة أو عدد التخطي، بينما يطلب الترقيم بالمؤشر العناصر التي تلي مؤشراً غير شفاف يشير إلى آخر عنصر تمت رؤيته.

يكون الترقيم بالمؤشر أكثر موثوقية عموماً مع البيانات المتغيرة باستمرار، لأنه يتجنب التحرك والتكرار اللذين قد تسببهما الإزاحات عند إدراج عناصر جديدة.

يتكامل React Query وuseInfiniteQuery بشكل طبيعي مع المحاكاة الافتراضية. فهو يدير الصفحات التي جرى جلبها، والمؤشر التالي، وحالتي التحميل والخطأ، بينما يعرض react-window الصفحات المسطّحة بكفاءة.

تسطّح الصفحات في مصفوفة واحدة للقائمة، وتستدعي fetchNextPage من حد onItemsRendered، فتحصل تلقائياً على التخزين المؤقت وإعادة المحاولة.

حدّد الوقت المناسب لجلب مزيد من البيانات في قائمة لانهائية تستخدم المحاكاة الافتراضية.

يحمّل التمرير اللانهائي الصفحات عندما يقترب المستخدم من النهاية. وتُبلغ onItemsRendered عن الفهارس، بينما يخبرك مقارنة overscanStopIndex مع itemCount بموعد الجلب، مع حماية ذلك من الطلبات المكررة.

استخدم الصفوف النائبة وصفوف الخطأ، واستعن بـ react-window-infinite-loader لتتبّع الحالة، وبالترقيم بالمؤشر مع البيانات المتغيرة باستمرار. يدير React Query وuseInfiniteQuery الصفحات والمؤشرات والحالات بالتوازي مع عرض react-window.