如何Implement Virtual Scrolling：Claude Code 实战指南

仮想滚动が必要な場面

数千〜数万件の列表を显示する際、所有的DOM要素を描画すると浏览器の性能が大幅に低下します。仮想滚动（ウィンドウイング）は、画面に見えている部分だけをDOMに描画する手法です。借助 Claude Code，这个高度な优化技術を高效地实现可以。

基本的仮想滚动の实现

> 固定高さアイテムの仮想滚动组件を作って。
> 10万件の列表でもスムーズに動くようにして。

import { useState, useRef, useCallback, useMemo } from 'react';

interface VirtualListProps<T> {
  items: T[];
  itemHeight: number;
  containerHeight: number;
  overscan?: number;
  renderItem: (item: T, index: number) => React.ReactNode;
}

function VirtualList<T>({
  items, itemHeight, containerHeight, overscan = 5, renderItem,
}: VirtualListProps<T>) {
  const [scrollTop, setScrollTop] = useState(0);
  const containerRef = useRef<HTMLDivElement>(null);

  const totalHeight = items.length * itemHeight;
  const visibleCount = Math.ceil(containerHeight / itemHeight);
  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
  const endIndex = Math.min(items.length, startIndex + visibleCount + overscan * 2);

  const visibleItems = useMemo(
    () => items.slice(startIndex, endIndex),
    [items, startIndex, endIndex]
  );

  const handleScroll = useCallback(() => {
    if (containerRef.current) {
      setScrollTop(containerRef.current.scrollTop);
    }
  }, []);

  return (
    <div
      ref={containerRef}
      onScroll={handleScroll}
      style={{ height: containerHeight, overflow: 'auto' }}
      role="list"
      aria-label={`リスト（全${items.length}件）`}
    >
      <div style={{ height: totalHeight, position: 'relative' }}>
        {visibleItems.map((item, i) => {
          const index = startIndex + i;
          return (
            <div
              key={index}
              role="listitem"
              style={{
                position: 'absolute',
                top: index * itemHeight,
                height: itemHeight,
                width: '100%',
              }}
            >
              {renderItem(item, index)}
            </div>
          );
        })}
      </div>
    </div>
  );
}

可変高さアイテムへの支持

> アイテムごとに高さが異なる仮想滚动にも支持して。

class DynamicSizeManager {
  private heights: Map<number, number> = new Map();
  private estimatedHeight: number;

  constructor(estimatedHeight: number) {
    this.estimatedHeight = estimatedHeight;
  }

  setHeight(index: number, height: number) {
    this.heights.set(index, height);
  }

  getHeight(index: number): number {
    return this.heights.get(index) ?? this.estimatedHeight;
  }

  getOffset(index: number): number {
    let offset = 0;
    for (let i = 0; i < index; i++) {
      offset += this.getHeight(i);
    }
    return offset;
  }

  getTotalHeight(itemCount: number): number {
    return this.getOffset(itemCount);
  }

  findIndexAtOffset(offset: number, itemCount: number): number {
    let current = 0;
    for (let i = 0; i < itemCount; i++) {
      current += this.getHeight(i);
      if (current > offset) return i;
    }
    return itemCount - 1;
  }
}

高さ自動計測组件

import { useRef, useEffect } from 'react';

function MeasuredItem({ index, onMeasure, children }: {
  index: number;
  onMeasure: (index: number, height: number) => void;
  children: React.ReactNode;
}) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (ref.current) {
      const observer = new ResizeObserver(([entry]) => {
        onMeasure(index, entry.contentRect.height);
      });
      observer.observe(ref.current);
      return () => observer.disconnect();
    }
  }, [index, onMeasure]);

  return <div ref={ref}>{children}</div>;
}

TanStack Virtualの活用

より本格的な实现にはTanStack Virtualが便利です。

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

function VirtualizedList({ items }: { items: string[] }) {
  const parentRef = useRef<HTMLDivElement>(null);

  const virtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 50,
    overscan: 10,
  });

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

总结

借助 Claude Code，固定高さ・可変高さの仮想滚动から、TanStack Virtualの活用まで高效地实现可以。無限滚动との組み合わせは無限滚动实现を、全般的な性能改善は性能优化。

TanStack Virtual的详细信息请参阅TanStack Virtual官方文档。