react-virtualized-list

react-virtualized-list 是一个专为处理大型数据集而设计的高性能 React 虚拟组件库，提供虚拟化列表、无限滚动、懒加载和动态数据更新等功能。通过使用 IntersectionObserver 精确管理可见性，优化性能并支持灵活的渲染和加载行为配置。仓库提供了详细的安装说明、使用示例和全面的 API 文档，适合快速集成和定制。

English

特性

• 虚拟化渲染: 仅渲染视口内可见的项目，大幅减少 DOM 操作，提升页面性能。
• 无限滚动: 支持滚动加载更多数据，适用于需要动态加载内容的场景。
• 自定义渲染和样式: 可根据需求自定义每个项目的渲染方式和外观样式。
• 加载和结束消息: 提供加载器和结束消息的配置，优化用户体验。
• 支持 TypeScript 和 JavaScript: 适用于 TypeScript 和 JavaScript 项目。

安装

使用 npm 或 yarn 安装：

npm install react-virtualized-list
# 或者
yarn add react-virtualized-list

使用

基本用法

以下是一个使用示例，展示如何使用 react-virtualized-list 组件：

import React from 'react';
import VirtualizedList from 'react-virtualized-list';

const itemStyle = {
  height: '50px',
  lineHeight: '40px',
  border: '1px solid blue',
  marginBottom: '10px',
};

const containerStyle = {
  width: '400px', 
  height: '600px', 
  margin: '0 auto', 
  border: '1px solid red', 
  padding: '16px',
  textAlign: 'center',
}

const App = () => {
  // 示例数据
  const data = Array.from({ length: 1000 }, (_, index) => `条目 ${index}`);

  // 加载更多条目的处理函数
  const handleLoadMore = async () => {
    // 加载更多数据的逻辑
  };

  // 渲染每个条目的函数
  const renderItem = (itemData) => <div>{itemData}</div>;

  return (
    <div style={containerStyle}>
      <VirtualizedList
        listData={data}
        renderItem={renderItem}
        containerHeight="600px"
        hasMore={true}
        itemStyle={itemStyle}
        itemLoader={<div>loading ...</div>}
        onLoadMore={handleLoadMore}
        loader={<div>加载中...</div>}
        endMessage={<div>没有更多条目了。</div>}
      />
    </div>
  );
};

export default App;

高级用法场景

探索更多示例和高级用法场景，查看 示例。

1. 虚拟化列表（大型数据列表）：通过仅渲染可见部分项目，提升大型数据列表的性能，详见BigDataListExample、

2. 无限滚动：实现无限滚动加载更多内容，适用于新闻、微博、朋友圈等场景，详见 InfiniteScrollList。

3. 懒加载数据: 延迟加载大量图片或视频，减少页面加载时间，详见 LazyImage。

4. 动态数据更新: 按需加载每个列表项的数据，提升性能，详见 DynamicInfiniteList。

5. 视口内自动刷新内容: 自动刷新可见区域内的内容，确保用户获取最新数据，详见 RefreshOnVisible。

6. 自定义渲染: 根据需求定制每个项目的外观和行为，适应各种项目需求。

7. 与第三方 UI 库配合使用: 可与主流 UI 库等（如Ant Design）灵活配合使用，提供优秀的用户体验。

参数

VirtualizedList 组件接受以下参数：

| Prop | Type | Required | Default | Description | | --------| ---- | -------- | ----------- | ----- | | listData | Array | ✅ | [] | 列表数据数组 | | renderItem | (itemData: T, fetchData: any) => React.ReactNode | ❌ | itemData => <>{itemData ? itemData : 'Loading ...'}</> | 渲染每个项目的函数 | | refreshOnVisible | Boolean | ❌ | false | 当项目可见时是否刷新数据 | | fetchItemData | ((item: T) => Promise<any>) | ❌ | null | 获取每个项目数据的异步函数 | | containerHeight | String | ❌ | '400px' | 列表容器的高度 | | listClassName | String | ❌ | null | 列表容器的CSS类名 | | itemClassName | String | ❌ | null | 每个项目的CSS类名（推荐使用） | | itemStyle | Object | ❌ | {} | 项目样式 | | observerOptions | Object | ❌ | { root: null, rootMargin: '0px', threshold: 0.1 } | 视口设置（见下方observerOptions配置表格） | | onLoadMore | () => Promise<void> | ❌ | null | 加载更多数据的函数 | | hasMore | Boolean | ❌ | false | 是否有更多数据 | | loader | React.ReactNode | ❌ | '' | 加载更多数据时显示的内容 | | endMessage | React.ReactNode | ❌ | '' | 所有数据加载完毕时的内容 | | itemLoader | React.ReactNode | ❌ | '' | 每个项目加载时显示的占位内容或背景图 | | emptyListMessage | React.ReactNode | ❌ | '' | 列表为空时的占位内容或背景图 |

observerOptions 配置表格

| Option | Description | Type | Required | Default | | ------------ | -------------------------------------------------------------------- | --------- | ------------ | ----------- | | root | 观察的视口元素。默认 null 表示使用浏览器的视口作为根容器。 | Element | ❌ | null | | rootMargin | 根容器的外边距。可以使用类似 CSS 的值（如 10px, 20%），默认值为 0px。用于扩展或收缩根容器的范围。 | String | ❌ | '0px' | | threshold | 一个或多个数值数组，表示目标元素可见比例达到这些值时，回调函数会被触发。0.1 意味着目标元素可见部分达到 10% 时触发回调。 | Array | ❌ | 0.1 |

许可证

react-virtualized-list is released under the MIT License. See the LICENSE file for details.

结论

如果你发现任何问题或有改进建议，请在 GitHub Issues 中提出。