虚拟滚动时为什么还是会有重复渲染和卡顿？

你这个问题主要是因为快速滚动时 IntersectionObserver 的回调触发时机和计算逻辑不够精准，特别是列表项高度不固定的情况下。建议用更稳定的滚动容器监听方式，结合 scrollTop 和 clientHeight 来动态计算渲染范围。

代码可以改成这样：

const handleScroll = () => {

  const scrollTop = containerRef.current.scrollTop;

  const start = Math.floor(scrollTop / estimatedItemHeight);

  const end = Math.ceil((scrollTop + containerRef.current.clientHeight) / estimatedItemHeight);

  setRenderRange({ start, end });

};



containerRef.current.addEventListener('scroll', handleScroll, { passive: true });

记得用一个预估的 estimatedItemHeight 来处理高度不固定的场景，避免计算偏差。如果高度差异太大，可以在数据里加一个缓存记录每个项的真实高度，动态调整计算结果。别忘了在组件销毁时清理监听器。

虚拟滚动的核心就是精确计算可视区域，你的问题出在高度不固定和快速滚动时的偏差。用 IntersectionObserver 不是最佳选择，尤其当列表项高度动态变化时，计算会越来越不准。试试下面这种基于滚动容器的方案，直接监听滚动事件来动态调整渲染范围。

import React, { useRef, useState, useEffect } from 'react';



function VirtualList({ itemCount, itemHeightGetter, renderItem }) {

  const containerRef = useRef(null);

  const [renderRange, setRenderRange] = useState({ start: 0, end: 0 });

  const [scrollTop, setScrollTop] = useState(0);



  useEffect(() => {

    const container = containerRef.current;

    if (!container) return;



    const handleScroll = () => {

      const scrollTop = container.scrollTop;

      setScrollTop(scrollTop);



      // 动态计算当前可视区域

      let startIndex = 0;

      let endIndex = 0;

      let accumulatedHeight = 0;



      for (let i = 0; i < itemCount; i++) {

        const height = itemHeightGetter(i);

        if (accumulatedHeight + height > scrollTop) {

          startIndex = i;

          break;

        }

        accumulatedHeight += height;

      }



      accumulatedHeight = 0;

      for (let i = 0; i < itemCount; i++) {

        const height = itemHeightGetter(i);

        accumulatedHeight += height;

        if (accumulatedHeight > scrollTop + container.clientHeight) {

          endIndex = i;

          break;

        }

      }



      setRenderRange({ start: Math.max(0, startIndex - 5), end: Math.min(itemCount - 1, endIndex + 5) });

    };



    container.addEventListener('scroll', handleScroll);

    handleScroll(); // 初始化触发一次

    return () => container.removeEventListener('scroll', handleScroll);

  }, [itemCount, itemHeightGetter]);



  return (

    
      ref={containerRef}

      style={{ overflowY: 'auto', height: '100%', position: 'relative' }}

    >

      
 acc + itemHeightGetter(i), 0) }} />

      {Array.from({ length: renderRange.end - renderRange.start + 1 }).map((_, index) => {

        const itemIndex = renderRange.start + index;

        return (

          
            key={itemIndex}

            style={{

              position: 'absolute',

              top: Array.from({ length: itemIndex }).reduce((acc, _, i) => acc + itemHeightGetter(i), 0),

              height: itemHeightGetter(itemIndex),

            }}

          >

            {renderItem(itemIndex)}

          


        );

      })}