FixedSizeList: عرض آلاف العناصر

تضيفون react-window إلى المشروع باستخدام مدير الحزم، مثلًا بتثبيت الحزمة react-window. فهي صغيرة ولا تعتمد على تبعيات ثقيلة.

بعد تثبيتها، تستوردون مكوّنات القوائم التي تحتاجون إليها، وأكثرها شيوعًا FixedSizeList للصفوف التي تشترك جميعًا في الارتفاع نفسه.

تحتاج FixedSizeList إلى عدة خصائص لتعمل: يحدد height وwidth أبعاد حاوية التمرير، ويحدد itemCount عدد العناصر الموجودة، بينما يحدد itemSize ارتفاع كل صف بالبكسل.

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

تتلقى دالة التصيير children كائنًا يحتوي على index وstyle. يحدد index العنصر الذي ينبغي تصييره، ما يتيح لكم الوصول إلى البيانات الصحيحة، بينما يحدد style موضع الصف داخل القائمة الافتراضية.

تعيدون JSX الخاص بذلك الصف، وتستدعي react-window هذه الدالة للصفوف الموجودة حاليًا في النافذة فقط.

تُعد الخاصية style أساسية، ويجب تطبيقها على عنصر الصف لديكم. تحدد react-window موضع كل صف باستخدام التموضع المطلق، وتستخدم top لوضعه عند الإزاحة الصحيحة داخل حاوية تمرير طويلة.

من دون تطبيق style، ستتراص جميع الصفوف في الموضع نفسه، وستنهار المحاكاة الافتراضية بصريًا.

يتمثل الخطأ الأكثر شيوعًا في react-window في حذف الخاصية style من الصف. ستبدو القائمة معطّلة، إذ تتداخل الصفوف في الأعلى ويتصرف التمرير بطريقة غير صحيحة.

احرصوا دائمًا على نشر style المقدّمة أو إسنادها إلى العنصر الخارجي لصفكم، للحفاظ على صحة التموضع.

بدلًا من الاحتفاظ بمصفوفتكم داخل دالة التصيير، يمكنكم تمريرها عبر الخاصية itemData. ثم تمررها react-window إلى الصف باعتبارها الحقل data إلى جانب index وstyle.

يبقي هذا مكوّن الصف مستقلًا، وقد يساعد في استخدام memoization، لأن الصف يتلقى بياناته بشكل صريح.

تدعم FixedSizeList القوائم الأفقية عبر ضبط الخاصية layout على horizontal، أو باستخدام خيارات direction بحسب الإصدار. عندئذ يمثل itemSize العرض بدلًا من الارتفاع.

يفيد هذا في أشرطة التمرير الأفقية أو الخطوط الزمنية التي تحتوي أيضًا على عدد كبير من العناصر.

تُصيّر الخاصية overscanCount بضعة صفوف إضافية خارج النافذة المرئية مباشرةً. يقلل هذا المخزن المؤقت احتمال ظهور مساحة فارغة أثناء التمرير السريع، قبل تثبيت الصفوف الجديدة.

يُحسّن overscan صغير سلاسة التجربة، بينما يهدر overscan كبير الفائدة من خلال تثبيت عدد كبير جدًا من الصفوف خارج الشاشة.

تحتاج FixedSizeList إلى أبعاد صريحة بالبكسل، وهذا غير مريح في التخطيطات المتجاوبة. يقيس المكوّن المصاحب AutoSizer الحاوية الأصلية ويزوّد القائمة بالعرض والارتفاع عبر render prop.

يتيح تغليف القائمة داخل AutoSizer أن تملأ حاوية مرنة من دون تثبيت الأحجام يدويًا، وأن تتكيف مع تغيّر التخطيط.

تضبط FixedSizeList العاملة كلًا من height وwidth وitemCount وitemSize، وتصيّر الصفوف عبر دالة children التي تطبق الخاصية style. ويمكن اختياريًا أن يزوّدها AutoSizer بالأبعاد، وأن تضيف overscanCount مخزنًا مؤقتًا.

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

تذكّروا ما يجب إبلاغ FixedSizeList به لتصيير الصفوف بطريقة صحيحة.

تُصيّر FixedSizeList صفوفًا متساوية الارتفاع باستخدام height وwidth وitemCount وitemSize ودالة تصيير children التي تتلقى index وstyle. ويُعد تطبيق الخاصية style إلزاميًا، وإلا تداخلت الصفوف.

مرّروا البيانات عبر itemData، وادعموا التخطيط الأفقي، وأضيفوا مخزنًا مؤقتًا صغيرًا باستخدام overscanCount، واستخدموا AutoSizer لملء الحاويات المتجاوبة من دون تثبيت الأبعاد يدويًا.