Quartz 4

虚拟列表

3 min read

react 性能优化 antd

rc-virtual-list是一个React库，用于呈现大型列表并实现虚拟滚动。以下是使用rc-virtual-list的基本文档说明：

依赖库 (GitHub - react-component/virtual-list: 🧾 React Virtual List Component which worked with animation)

安装

你可以使用npm或yarn安装rc-virtual-list：

npm install rc-virtual-list --save

或者

yarn add rc-virtual-list

基本用法

import React from 'react';
import VirtualList from 'rc-virtual-list';
 
const MyComponent = () => {
  const items = Array.from({ length: 1000 }, (_, i) => `Item ${i}`);
 
  return (
    <VirtualList 
      width={300} 
      height={400} 
      itemCount={items.length} 
      itemSize={50}
      renderItem={({ index, style }) => (
        <div style={style}>{items[index]}</div>
      )}
    />
  );
};
 
export default MyComponent;

在上面的示例中，我们导入rc-virtual-list并在组件中使用它。我们创建了一个包含1000个项的数组，并将其传递给VirtualList组件。我们设置了列表的宽度、高度、项数和每个项的大小，并通过renderItem属性定义了如何呈现每个项。

属性

rc-virtual-list提供了一些属性来配置和定制虚拟列表的外观和行为。以下是一些常用的属性：

  • width：列表的宽度。
  • height：列表的高度。
  • itemCount：项的数量。
  • itemSize：每个项的高度。
  • renderItem：用于呈现每个项的函数。
  • overscan：预加载的项数，以减少滚动时的闪烁。
  • scrollToIndex：滚动到指定索引位置。
  • 等等…

antd Demo

import { Avatar, List, message } from 'antd';
import VirtualList from 'rc-virtual-list';
import React, { useEffect, useState } from 'react';
const fakeDataUrl =
  'https://randomuser.me/api/?results=20&inc=name,gender,email,nat,picture&noinfo';
const ContainerHeight = 400;
const App = () => {
  const [data, setData] = useState([]);
  const appendData = () => {
    fetch(fakeDataUrl)
      .then((res) => res.json())
      .then((body) => {
        setData(data.concat(body.results));
        message.success(`${body.results.length} more items loaded!`);
      });
  };
  useEffect(() => {
    appendData();
  }, []);
  const onScroll = (e) => {
    if (e.currentTarget.scrollHeight - e.currentTarget.scrollTop === ContainerHeight) {
      appendData();
    }
  };
  return (
    <List>
      <VirtualList
        data={data}
        height={ContainerHeight}
        itemHeight={47}
        itemKey="email"
        onScroll={onScroll}
      >
        {(item) => (
          <List.Item key={item.email}>
            <List.Item.Meta
              avatar={<Avatar src={item.picture.large} />}
              title={<a href="https://ant.design">{item.name.last}</a>}
              description={item.email}
            />
            <div>Content</div>
          </List.Item>
        )}
      </VirtualList>
    </List>
  );
};
export default App;

Graph View