VariableSizeList: ارتفاعات الصفوف الديناميكية

لا تكون الصفوف موحّدة أحيانًا: فقد تضم قائمة محادثة رسائل قصيرة وطويلة، أو تحتوي خلاصة على بطاقات ذات محتوى متفاوت. لا تستطيع FixedSizeList التعامل مع ذلك لأنها تفترض وجود itemSize ثابت واحد.

في هذه الحالات، توفر react-window نوعًا من القوائم يتيح لكل عنصر تحديد حجمه الخاص.

تعمل VariableSizeList مثل FixedSizeList، لكنها تقبل حجمًا خاصًا بكل عنصر. تستوردونها بدلًا منها وتقدمون دالة تعيد حجم أي index محدد.

يبقى كل شيء آخر، بما في ذلك دالة تصيير children والخاصية style المحورية، كما هو، لذا تكون عملية الانتقال بسيطة.

مع VariableSizeList، تكون itemSize دالة تتلقى index وتعيد ارتفاع ذلك الصف بالبكسل. تستدعيها react-window لحساب الإزاحات وتحديد النافذة المرئية.

يتيح لكم هذا ترميز الارتفاعات المعروفة، مثل تحديد صفوف أطول للعناصر التي تحتوي على صور وصفوف أقصر للنصوص العادية.

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

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

تخزّن VariableSizeList إزاحات العناصر مؤقتًا لتحسين الأداء. وعندما يتغيّر ارتفاع مقاس، يجب استدعاء طريقة resetAfterIndex في القائمة عبر ref الخاص بها، كي تعيد حساب المواضع بدءًا من ذلك index فصاعدًا.

يؤدي نسيان ذلك إلى إبقاء الإزاحات قديمة والصفوف غير محاذاة، لذلك تُعد resetAfterIndex المفتاح لإنجاح القياس الديناميكي.

توجد هنا مشكلة الدجاجة والبيضة: تحتاجون إلى ارتفاع لتصيير الصف، لكنكم لا تعرفون الارتفاع الحقيقي إلا بعد تصييره. ويجب على القائمة وضع الصف قبل أن تتمكن من قياسه.

يتطلب حل ذلك التصيير باستخدام تقدير أولًا، ثم تصحيح الموضع بعد معرفة الارتفاع الحقيقي.

يتمثل النمط المعتاد في تصيير الصفوف بارتفاع تقديري، وقياس ارتفاعها الفعلي بعد الرسم باستخدام ref أو ResizeObserver، وتخزين القيمة المقاسة، ثم استدعاء resetAfterIndex لتحديث المواضع.

تتقارب هذه الحلقة بسرعة، فتستقر القائمة على إزاحات صحيحة بعد أول جولة قياس.

ينبغي أن تظل دالة itemSize مستقرة عبر عمليات إعادة التصيير، وعادةً ما تُغلّف باستخدام useCallback، حتى لا تبطل القائمة صلاحية الإزاحات المخزنة مؤقتًا باستمرار.

قد تؤدي دالة غير مستقرة معرّفة داخل السطر إلى إعادة حساب غير ضرورية، مما يضر بالأداء الذي تهدف المحاكاة الافتراضية إلى توفيره.

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

في القوائم التي تختلف فيها ارتفاعات الصفوف فعلاً، تستحق هذه التكلفة العناء؛ أما في الصفوف متساوية الارتفاع، فتظل FixedSizeList الخيار الأسرع والأبسط.

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

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

تذكّر كيف يتعرّف VariableSizeList على ارتفاع كل صف.

تتعامل VariableSizeList مع الصفوف ذات الارتفاعات المختلفة من خلال أخذ itemSize كدالة تعتمد على الفهرس. يمكن حساب الارتفاعات مسبقاً أو قياسها؛ أما الارتفاعات المقيسة فتحتاج إلى حلقة التقدير ثم العرض ثم القياس ثم التحديث، مع استخدام resetAfterIndex.

احرص على ثبات دالة itemSize باستخدام useCallback. فهي تكلّف أكثر من FixedSizeList، لذلك يُفضّل استخدام البديل الثابت مع الصفوف متساوية الارتفاع أو عندما يكون التقريب كافياً.