实现 虚拟列表的代码

以下是一个简单的虚拟列表实现代码示例，使用React.js和JavaScript：

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

function VirtualList({ itemCount, itemSize, renderItem }) {
  const [scrollTop, setScrollTop] = useState(0);
  const itemsPerViewport = Math.ceil(window.innerHeight / itemSize);
  const totalHeight = itemCount * itemSize;
  const visibleRange = useRef({ start: 0, end: itemsPerViewport });

  const handleScroll = useCallback((event) => {
    const { scrollTop } = event.target;
    setScrollTop(scrollTop);
    const start = Math.floor(scrollTop / itemSize);
    const end = Math.min(start + itemsPerViewport, itemCount);
    visibleRange.current = { start, end };
  }, [itemCount, itemSize, itemsPerViewport]);

  const items = [];
  for (let i = visibleRange.current.start; i < visibleRange.current.end; i++) {
    items.push(renderItem(i));
  }

  return (
    <div
      style={{ height: totalHeight, position: 'relative' }}
      onScroll={handleScroll}
    >
      <div style={{ position: 'absolute', top: `${scrollTop}px` }}>
        {items}
      </div>
    </div>
  );
}

在上面的代码中，我们定义了一个名为`VirtualList`的React组件，它接受三个属性：

- `itemCount`: 列表项的总数
- `itemSize`: 每个列表项的高度
- `renderItem`: 一个函数，用于渲染每个列表项

在组件内部，我们首先使用`useState`钩子来追踪当前滚动位置（`scrollTop`）的状态。然后，我们计算出每个视口中可见的列表项数（`itemsPerViewport`）和整个列表的总高度（`totalHeight`）。我们使用`useRef`钩子来存储当前可见范围内的列表项的范围（`visibleRange`）。

接下来，我们定义了一个`handleScroll`回调函数，用于处理滚动事件。在该回调函数中，我们更新了`scrollTop`状态、计算出当前可见范围内的列表项的范围，并将其存储在`visibleRange`中。

最后，我们循环遍历当前可见范围内的列表项，并将它们传递给`renderItem`函数来渲染。

在最外层的`div`元素上，我们设置了列表的总高度，并在滚动事件上绑定了`handleScroll`回调函数。我们还在内部使用了一个绝对定位的`div`元素来包含可见的列表项，并根据`scrollTop`状态来设置其顶部偏移量。

这样，我们就实现了一个简单的虚拟列表，可以大大提高大型列表的性能和渲染速度。