npm 包 rc-virtual-list 使用教程

介绍

rc-virtual-list 是一个 React 组件，它能够渲染大量数据而不影响页面性能。它相当于虚拟滚动列表，只会渲染当前屏幕可见的结构，页面不会因为数据量的增加而变得缓慢。

安装

安装 rc-virtual-list 只需执行以下命令：

npm install rc-virtual-list

或者使用 yarn:

yarn add rc-virtual-list

使用

在代码中引入 rc-virtual-list：

import VirtualList from 'rc-virtual-list';

然后在你的组件中使用rc-virtual-list组件，传递相关参数即可；

// www.javascriptcn.com code example
<VirtualList
  width={300}
  height={500}
  itemKey={(index) => items[index].id} // 列表项的key，常常是id
  itemCount={items.length} // 列表项个数
  itemSize={50} // 每个列表项高度
  renderItem={({ index, style }) => (
    <div key={items[index].id} style={style}>
      {items[index].name}
    </div>
  )} // 渲染列表项
/>

经过以上步骤, 一个虚拟滚动列表就可以在你的页面中显示出来

参数

itemKey

itemKey 是一个函数，用于指定列表项的唯一key。在列表项渲染时，使用 itemKey 的返回值来作为列表项的key，方便 React diff 处理。

示例代码：

// www.javascriptcn.com code example
<VirtualList
  width={300}
  height={500}
  itemKey={(index) => items[index].id}
  itemCount={items.length}
  itemSize={50}
  renderItem={({ index, style }) => (
    <div key={items[index].id} style={style}>
      {items[index].name}
    </div>
  )}
/>

renderItem

renderItem 是一个函数，用于指定列表项的渲染样式。它接收一个包含 index 和 style 两个属性的对象，分别表示列表项的索引和应用于当前列表项的样式。

示例代码：

// www.javascriptcn.com code example
<VirtualList
  width={300}
  height={500}
  itemKey={(index) => items[index].id}
  itemCount={items.length}
  itemSize={50}
  renderItem={({ index, style }) => (
    <div key={items[index].id} style={style}>
      {items[index].name}
    </div>
  )}
/>

常见问题

数据动态更新之后，列表渲染有问题？

使用 React 组件时，如果组件的 props 或 state 发生变化，组件会重新渲染。rc-virtual-list 组件也是一样的。所以当列表数据更新时，我们需要通过 key 属性来告诉 React 如何 diff 渲染，从而避免出现重复或失效的情况。

// www.javascriptcn.com code example
<VirtualList
  width={300}
  height={500}
  itemKey={(index) => items[index].id}
  itemCount={items.length}
  itemSize={50}
  renderItem={({ index, style }) => (
    <div key={items[index].id} style={style}>
      {items[index].name}
    </div>
  )}
/>

如何使用 ref 获取到组件实例，从而调用组件的方法？

可以使用 React.forwardRef 函数，将 ref 提取出来，然后将它传给子组件

// www.javascriptcn.com code example
import { useRef } from 'react';
import VirtualList, { VirtualListInstance } from 'rc-virtual-list';

function App() {
  const virtualListRef = useRef<VirtualListInstance>(null);

  const handleClick = () => {
    virtualListRef.current?.scrollTo({
      index: 100,
      align: 'start',
    });
  };

  return (
    <>
      <button onClick={handleClick}>滚动到指定位置</button>
      <VirtualList
        ref={virtualListRef}
        width={300}
        height={500}
        itemKey={(index) => items[index].id}
        itemCount={items.length}
        itemSize={50}
        renderItem={({ index, style }) => (
          <div key={items[index].id} style={style}>
            {items[index].name}
          </div>
        )}
      />
    </>
  );
}

结语

rc-virtual-list 是一个非常好用的前端组件，对于数据量较大、滚动面积占整个页面大部分的场景非常友好。虽然它的使用并不算复杂，但是对于一些特定的场景和问题，我们还需要自己去做一些额外的调整。相信通过学习本文，你已经可以很好地掌握rc-virtual-list的使用，希望能够对你的工作和学习带来帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/rc-virtual-list