ما هو الـ Virtualization (Windowing) وكيف تستخدم مكتبة TanStack Virtual لعرض قوائم ضخمة؟

الإجابة المختصرة

هو تقنية تحصر تصيير عناصر الـ DOM فقط على العناصر الظاهرة حالياً داخل نافذة العرض (Viewport)، مما يحافظ على خفة الـ DOM وسرعة استجابة المتصفح حتى مع ملايين الصفوف.

الشرح

إذا حاولت تصيير 10,000 عقدة DOM دفعة واحدة، سيتجمد المتصفح بسبب استهلاك الذاكرة وحسابات التخطيط. تقنية الـ Windowing تحسب موضع الـ Scroll الحالي وتنشئ فقط الـ 20 أو 30 عنصراً المرئية مع حشو مساحات فارغة علوية وسفلية للمحافظة على موضع شريط التمرير الصحيح.

مثال بالكود

import { useVirtualizer } from '@tanstack/react-virtual';
import { useRef } from 'react';

function VirtualList({ items }: { items: string[] }) {
  const parentRef = useRef<HTMLDivElement>(null);
  const rowVirtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 35,
  });

  return (
    <div ref={parentRef} style={{ height: '400px', overflow: 'auto' }}>
      <div style={{ height: `${rowVirtualizer.getTotalSize()}px`, position: 'relative' }}>
        {rowVirtualizer.getVirtualItems().map(virtualRow => (
          <div key={virtualRow.index} style={{ position: 'absolute', top: 0, transform: `translateY(${virtualRow.start}px)` }}>
            {items[virtualRow.index]}
          </div>
        ))}
      </div>
    </div>
  );
}

أخطاء شائعة

• محاولة معالجة بطء القوائم الكبيرة بتغليف كل صف بـ React.memo بدلاً من تطبيق الـ Virtualization الحقيقي.

أسئلة متابعة

• ما هي مشكلة الـ Layout Thrashing وكيف نتجنبها في مكونات ريأكت؟

المصادر

• TanStack Virtual docs — Introduction