虚拟滚动痛点：

• 节点内存
• 阻塞主线程
• 滚动卡顿：频繁触发重绘重排

核心原理：

通过计算，只渲染视口内容；

• 防抖滚动处理
• 通过Observer监听滚动事件，计算视口内的内容，只渲染视口内的内容；
• Web Worker：将滚动位置计算移至非主线程，避免阻塞 UI 渲染；

// 防抖滚动处理
const handleScroll = useThrottle((e: React.UIEvent<HTMLDivElement>) => {
  setScrollTop(e.currentTarget.scrollTop);
}, 16);

// 结合 IntersectionObserver
useEffect(() => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 动态加载数据或更新状态
      }
    });
  }, { root: containerRef.current });

  visibleItems.forEach(item => {
    observer.observe(item.node);
  });
  return () => observer.disconnect();
}, [visibleItems]);