{"id":28527830,"url":"https://github.com/sailingcoder/react-virtualized-list","last_synced_at":"2025-10-24T20:11:51.605Z","repository":{"id":241715942,"uuid":"807493826","full_name":"SailingCoder/react-virtualized-list","owner":"SailingCoder","description":"react-virtualized-list 是一个专为处理大型数据集而设计的高性能 React 虚拟组件库，提供虚拟化列表、无限滚动、懒加载和动态数据更新等功能。通过使用 IntersectionObserver 精确管理可见性，优化性能并支持灵活的渲染和加载行为配置。仓库提供了详细的安装说明、使用示例和全面的 API 文档，适合快速集成和定制。","archived":false,"fork":false,"pushed_at":"2025-09-30T08:12:00.000Z","size":4419,"stargazers_count":7,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-30T08:21:11.928Z","etag":null,"topics":["list","react","reactjs","virtual","virtual-list","virtualized","virtualizedlist"],"latest_commit_sha":null,"homepage":"https://sailingcoder.github.io/react-virtualized-list/build/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SailingCoder.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-29T07:56:18.000Z","updated_at":"2025-09-30T08:12:03.000Z","dependencies_parsed_at":"2025-03-24T22:40:45.533Z","dependency_job_id":null,"html_url":"https://github.com/SailingCoder/react-virtualized-list","commit_stats":null,"previous_names":["sailingcoder/react-virtualized-list"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/SailingCoder/react-virtualized-list","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SailingCoder%2Freact-virtualized-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SailingCoder%2Freact-virtualized-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SailingCoder%2Freact-virtualized-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SailingCoder%2Freact-virtualized-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SailingCoder","download_url":"https://codeload.github.com/SailingCoder/react-virtualized-list/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SailingCoder%2Freact-virtualized-list/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280857906,"owners_count":26403222,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-24T02:00:06.418Z","response_time":73,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["list","react","reactjs","virtual","virtual-list","virtualized","virtualizedlist"],"created_at":"2025-06-09T12:15:48.080Z","updated_at":"2025-10-24T20:11:51.554Z","avatar_url":"https://github.com/SailingCoder.png","language":"TypeScript","readme":"# react-virtualized-list\n\n`react-virtualized-list` 是一个专为处理大型数据集而设计的高性能 React 虚拟组件库，提供虚拟化列表、无限滚动、懒加载和动态数据更新等功能。通过使用 `IntersectionObserver` 精确管理可见性，优化性能并支持灵活的渲染和加载行为配置。仓库提供了详细的安装说明、使用示例和全面的 API 文档，适合快速集成和定制。\n\n![npm version](https://img.shields.io/npm/v/react-virtualized-list)\n\n[English](https://github.com/SailingCoder/react-virtualized-list/blob/main/doc/README_EN.md)\n\n\n## 特性 \n\n-   **虚拟化渲染**: 仅渲染视口内可见的项目，大幅减少 DOM 操作，提升页面性能。\n-   **无限滚动**: 支持滚动加载更多数据，适用于需要动态加载内容的场景。\n-   **自定义渲染和样式**: 可根据需求自定义每个项目的渲染方式和外观样式。\n-   **加载和结束消息**: 提供加载器和结束消息的配置，优化用户体验。\n-   **支持 TypeScript 和 JavaScript**: 适用于 TypeScript 和 JavaScript 项目。\n\n## 安装\n\n使用 npm 或 yarn 安装：\n\n```bash\nnpm install react-virtualized-list\n# 或者\nyarn add react-virtualized-list\n```\n\n## 使用\n\n### 基本用法\n\n以下是一个使用示例，展示如何使用 `react-virtualized-list` 组件：\n\n```javascript\nimport React from 'react';\nimport VirtualizedList from 'react-virtualized-list';\n\nconst itemStyle = {\n  height: '50px',\n  lineHeight: '40px',\n  border: '1px solid blue',\n  marginBottom: '10px',\n};\n\nconst containerStyle = {\n  width: '400px', \n  height: '600px', \n  margin: '0 auto', \n  border: '1px solid red', \n  padding: '16px',\n  textAlign: 'center',\n}\n\nconst App = () =\u003e {\n  // 示例数据\n  const data = Array.from({ length: 1000 }, (_, index) =\u003e `条目 ${index}`);\n\n  // 加载更多条目的处理函数\n  const handleLoadMore = async () =\u003e {\n    // 加载更多数据的逻辑\n  };\n\n  // 渲染每个条目的函数\n  const renderItem = (itemData) =\u003e \u003cdiv\u003e{itemData}\u003c/div\u003e;\n\n  return (\n    \u003cdiv style={containerStyle}\u003e\n      \u003cVirtualizedList\n        listData={data}\n        renderItem={renderItem}\n        containerHeight=\"600px\"\n        hasMore={true}\n        itemStyle={itemStyle}\n        itemLoader={\u003cdiv\u003eloading ...\u003c/div\u003e}\n        onLoadMore={handleLoadMore}\n        loader={\u003cdiv\u003e加载中...\u003c/div\u003e}\n        endMessage={\u003cdiv\u003e没有更多条目了。\u003c/div\u003e}\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n### 高级用法场景\n\n探索更多示例和高级用法场景，查看 [示例](https://sailingcoder.github.io/react-virtualized-list/build/)。\n\n1.  **虚拟化列表**（大型数据列表）：通过仅渲染可见部分项目，提升大型数据列表的性能，详见[BigDataListExample](https://github.com/SailingCoder/react-virtualized-list/blob/main/src/examples/BigDataListExample.tsx)、\n\n\n2.  **无限滚动**：实现无限滚动加载更多内容，适用于新闻、微博、朋友圈等场景，详见 [InfiniteScrollList](https://github.com/SailingCoder/react-virtualized-list/blob/main/src/examples/InfiniteScrollList.tsx)。\n\n2.  **懒加载数据**: 延迟加载大量图片或视频，减少页面加载时间，详见 [LazyImage](https://github.com/SailingCoder/react-virtualized-list/blob/main/src/examples/LazyImage.tsx)。\n\n2.  **动态数据更新**: 按需加载每个列表项的数据，提升性能，详见 [DynamicInfiniteList](https://github.com/SailingCoder/react-virtualized-list/blob/main/src/examples/DynamicInfiniteList.tsx)。\n\n2.  **视口内自动刷新内容**: 自动刷新可见区域内的内容，确保用户获取最新数据，详见 [RefreshOnVisible](https://github.com/SailingCoder/react-virtualized-list/blob/main/src/examples/RefreshOnVisible.tsx)。\n\n2.  **自定义渲染**: 根据需求定制每个项目的外观和行为，适应各种项目需求。\n\n2.  **与第三方 UI 库配合使用**: 可与主流 UI 库等（如[Ant Design](https://ant-design.antgroup.com/index-cn)）灵活配合使用，提供优秀的用户体验。\n\n## 参数\n\n### `VirtualizedList` 组件接受以下参数：\n\n| Prop  | Type | Required | Default  | Description |\n| --------| ---- | -------- | ----------- | -----  |\n| `listData`         | `Array`         | ✅        | `[]` | 列表数据数组 |\n| `renderItem`       | `(itemData: T, fetchData: any) =\u003e React.ReactNode` | ❌        | `itemData =\u003e \u003c\u003e{itemData ? itemData : 'Loading ...'}\u003c/\u003e` | 渲染每个项目的函数    |\n| `refreshOnVisible` | `Boolean` | ❌   | `false`  | 当项目可见时是否刷新数据 |\n| `fetchItemData`    | `((item: T) =\u003e Promise\u003cany\u003e) ` | ❌ |  `null` | 获取每个项目数据的异步函数 |\n| `containerHeight`  | `String` | ❌    | `'400px'` | 列表容器的高度 |\n| `listClassName`    | `String` | ❌    | `null` | 列表容器的CSS类名     |\n| `itemClassName`    | `String` | ❌    | `null` | 每个项目的CSS类名（推荐使用）   |\n| `itemStyle`        | `Object`  | ❌    | `{}` | 项目样式    |\n| `observerOptions`  | `Object`  | ❌    | `{ root: null, rootMargin: '0px', threshold: 0.1 }`       | 视口设置（见下方observerOptions配置表格） |\n| `onLoadMore`       | `() =\u003e Promise\u003cvoid\u003e` | ❌   |   `null`   | 加载更多数据的函数 |\n| `hasMore`          | `Boolean`  | ❌   | `false`  | 是否有更多数据 |\n| `loader`           | `React.ReactNode`  | ❌ | `''` | 加载更多数据时显示的内容 |\n| `endMessage`       | `React.ReactNode` | ❌  | `''` | 所有数据加载完毕时的内容 |\n| `itemLoader`       | `React.ReactNode` | ❌ | `''` | 每个项目加载时显示的占位内容或背景图 |\n| `emptyListMessage` | `React.ReactNode` | ❌    | `''` | 列表为空时的占位内容或背景图 |\n\n### `observerOptions` 配置表格\n\n| **Option**   | **Description**                                                      | **Type**  | **Required** | **Default** |\n| ------------ | -------------------------------------------------------------------- | --------- | ------------ | ----------- |\n| `root`       | 观察的视口元素。默认 null 表示使用浏览器的视口作为根容器。                                     | `Element` | ❌            | `null`      |\n| `rootMargin` | 根容器的外边距。可以使用类似 CSS 的值（如 `10px`, `20%`），默认值为 `0px`。用于扩展或收缩根容器的范围。     | `String`  | ❌            | `'0px'`     |\n| `threshold`  | 一个或多个数值数组，表示目标元素可见比例达到这些值时，回调函数会被触发。`0.1` 意味着目标元素可见部分达到 `10%` 时触发回调。 | `Array`   | ❌            | `0.1`       |\n\n## 许可证\n\n**react-virtualized-list** is released under the MIT License. See the [LICENSE](https://github.com/SailingCoder/react-virtualized-list/blob/main/LICENSE) file for details.\n\n## 结论\n\n如果你发现任何问题或有改进建议，请在 [GitHub Issues](https://github.com/SailingCoder/react-virtualized-list/issues) 中提出。\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsailingcoder%2Freact-virtualized-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsailingcoder%2Freact-virtualized-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsailingcoder%2Freact-virtualized-list/lists"}