最近项目上要完成虚拟滚动加载功能，使用的是rc-virtual-list实现的，下面为具体的使用和源码讲解。

快速上手

1、安装依赖

    npm install rc-virtual-list

2、创建虚拟列表创建文件VirtualListDemo.js。

import React from 'react';
import VirtualList from 'rc-virtual-list';

const data = Array.from({ length: 1000 }, (_, index) => `Item ${index + 1}`);
const ItemHeight = 30;

const VirtualListDemo = () => {
  return (
    <div style={{ height: 300, overflow: 'auto' }}>
      <VirtualList
        data={data}
        height={300}
        itemHeight={ItemHeight}
        itemKey={(item) => item}
      >
        {(item) => (
          <div
            key={item}
            style={{
              height: ItemHeight,
              display: 'flex',
              alignItems: 'center',
              borderBottom: '1px solid #ddd',
              padding: '0 10px',
            }}
          >
            {item}
          </div>
        )}
      </VirtualList>
    </div>
  );
};

export default VirtualListDemo;

很快就完成了虚拟列表的创建。

属性说明

data: items 也就是要展示的数据
component: 这个默认是 div, 你可以理解成，你的 item 的容器，相当于 ul 中的 li
height: 这个是可视区域的高度。
itemHeight: 这个是每个 item 的高度，这个只是默认值，实际的高度可以不一样的，列表在渲染时会通过浏览器空闲时间计算每条的高度。
itemKey: 这个是每个 item 的 key, 非常重要，可以是 item 数据的某一个 property, 也可以是一个函数(item)=>string

使用注意事项

itemHeight值尽量接近每项的展示值，不要过大过小。
在使用过程中如果发现页面内容展示不全，请查看传入VirtualList组件中children是否为原生html，如果是封装的组件，确认组件是否被React.forwardRef包裹。

rc-virtual-list使用

快速上手

属性说明

使用注意事项