当前位置：首页 > React

react如何实现按虚加载

2026-03-11 10:16:56React

实现虚拟加载（按需加载）的方法

虚拟加载（Virtual Loading）通常指在React中实现列表的虚拟滚动或按需渲染，以优化性能。以下是几种常见实现方式：

使用react-window库

react-window是React官方推荐的轻量级虚拟滚动库，适合大型列表数据的渲染优化。

安装依赖：

npm install react-window

基础实现示例：

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

const VirtualList = () => (
  <List
    height={500}
    itemCount={1000}
    itemSize={35}
    width={300}
  >
    {Row}
  </List>
);

关键参数说明：

height：可视区域高度
itemCount：总数据量
itemSize：每项高度（固定高度时）
width：列表宽度

使用react-virtualized库

react-virtualized提供更丰富的虚拟滚动功能，支持网格布局和动态高度。

安装依赖：

npm install react-virtualized

示例代码：

import { List } from 'react-virtualized';

function VirtualList({ list }) {
  return (
    <List
      width={300}
      height={500}
      rowCount={list.length}
      rowHeight={50}
      rowRenderer={({ key, index, style }) => (
        <div key={key} style={style}>
          {list[index]}
        </div>
      )}
    />
  );
}

高级功能：

CellMeasurer：处理动态高度内容
AutoSizer：自动适应容器尺寸
Grid：二维虚拟滚动

自定义实现方案

对于特殊需求，可以手动实现虚拟加载逻辑：

function CustomVirtualList({ items, itemHeight, containerHeight }) {
  const [scrollTop, setScrollTop] = useState(0);
  const innerHeight = items.length * itemHeight;

  const startIndex = Math.floor(scrollTop / itemHeight);
  const endIndex = Math.min(
    items.length - 1,
    Math.floor((scrollTop + containerHeight) / itemHeight)
  );

  const visibleItems = items.slice(startIndex, endIndex + 1);

  return (
    <div 
      style={{ height: containerHeight, overflow: 'auto' }}
      onScroll={e => setScrollTop(e.currentTarget.scrollTop)}
    >
      <div style={{ height: innerHeight, position: 'relative' }}>
        {visibleItems.map((item, index) => (
          <div 
            key={startIndex + index}
            style={{
              position: 'absolute',
              top: (startIndex + index) * itemHeight,
              height: itemHeight
            }}
          >
            {item}
          </div>
        ))}
      </div>
    </div>
  );
}

核心逻辑：

计算可视区域内的数据索引范围
只渲染可见区域的元素
通过绝对定位控制元素位置
外层容器设置固定高度和滚动

无限滚动方案

结合虚拟加载与数据分页，实现无限滚动效果：

react如何实现按虚加载

function InfiniteVirtualList() {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(false);

  const loadMore = useCallback(() => {
    if (loading) return;
    setLoading(true);
    fetchMoreData().then(newItems => {
      setItems(prev => [...prev, ...newItems]);
      setLoading(false);
    });
  }, [loading]);

  return (
    <List
      height={500}
      itemCount={items.length + 1}
      itemSize={50}
      onItemsRendered={({ visibleStopIndex }) => {
        if (visibleStopIndex >= items.length - 5) {
          loadMore();
        }
      }}
    >
      {({ index, style }) => (
        <div style={style}>
          {index < items.length ? items[index] : 'Loading...'}
        </div>
      )}
    </List>
  );
}