React Tiny Virtual List 使用教程

React Tiny Virtual List 使用教程

react-tiny-virtual-listA tiny but mighty 3kb list virtualization library, with zero dependencies 💪 Supports variable heights/widths, sticky items, scrolling to index, and more!项目地址:https://gitcode.com/gh_mirrors/re/react-tiny-virtual-list

1、项目介绍

React Tiny Virtual List 是一个轻量级的列表虚拟化库，旨在高效地渲染大量数据列表。它没有任何外部依赖，仅占用3kb的压缩大小，适用于需要高性能列表渲染的场景。该库支持固定或可变的高度/宽度、垂直或水平列表，并且可以轻松地滚动到指定索引或设置初始滚动偏移。

2、项目快速启动

安装

使用 npm 安装 react-tiny-virtual-list：

npm install react-tiny-virtual-list --save

使用

在项目中引入并使用 VirtualList：

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

const data = Array(1000).fill().map((_, i) => `Item #${i}`);

const App = () => (
  <VirtualList
    width="100%"
    height={600}
    itemCount={data.length}
    itemSize={50} // 每个项目的高度
    renderItem={({ index, style }) => (
      <div style={style}>
        {data[index]}
      </div>
    )}
  />
);

export default App;

UMD 构建

如果你需要使用 UMD 构建，可以通过以下方式引入：

<script src="react-tiny-virtual-list/umd/react-tiny-virtual-list.js"></script>
<script>
  var VirtualList = window.VirtualList;
</script>

3、应用案例和最佳实践

案例1：固定高度列表

在固定高度列表中，每个项目的高度是固定的，因此可以直接设置 itemSize 属性：

<VirtualList
  width="100%"
  height={600}
  itemCount={data.length}
  itemSize={50}
  renderItem={({ index, style }) => (
    <div style={style}>
      {data[index]}
    </div>
  )}
/>

案例2：可变高度列表

在可变高度列表中，每个项目的高度可能不同。你可以通过传递一个函数来动态计算每个项目的高度：

<VirtualList
  width="100%"
  height={600}
  itemCount={data.length}
  itemSize={(index) => getItemHeight(index)}
  renderItem={({ index, style }) => (
    <div style={style}>
      {data[index]}
    </div>
  )}
/>

最佳实践

• 性能优化：在处理大量数据时，确保 itemSize 属性设置正确，以避免不必要的重绘。
• 手动调用 recomputeSizes：当 itemSize 是一个函数时，如果数据发生变化，需要手动调用 recomputeSizes 方法来更新列表。

4、典型生态项目

React Virtualized

React Virtualized 是一个功能更强大的虚拟化库，支持更多的用例。如果你需要更复杂的功能，如网格、表格等，可以考虑使用 React Virtualized。

React Window

React Window 是 React Virtualized 的轻量级替代品，专注于提供高性能的虚拟化列表和网格。如果你需要更轻量级的解决方案，可以考虑使用 React Window。

通过以上教程，你可以快速上手 React Tiny Virtual List，并在实际项目中高效地渲染大量数据列表。

react-tiny-virtual-listA tiny but mighty 3kb list virtualization library, with zero dependencies 💪 Supports variable heights/widths, sticky items, scrolling to index, and more!项目地址:https://gitcode.com/gh_mirrors/re/react-tiny-virtual-list