{"id":13394143,"url":"https://github.com/bvaughn/react-window","last_synced_at":"2025-09-09T20:44:37.375Z","repository":{"id":37319122,"uuid":"132474914","full_name":"bvaughn/react-window","owner":"bvaughn","description":"React components for efficiently rendering large lists and tabular data","archived":false,"fork":false,"pushed_at":"2025-04-18T19:23:10.000Z","size":1794,"stargazers_count":16433,"open_issues_count":0,"forks_count":798,"subscribers_count":63,"default_branch":"master","last_synced_at":"2025-05-01T03:23:43.635Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://react-window.now.sh/","language":"JavaScript","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/bvaughn.png","metadata":{"files":{"readme":"README-zh_CN.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","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},"funding":{"github":"bvaughn","patreon":null,"open_collective":"brianvaughn","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":"bvaughn","custom":null}},"created_at":"2018-05-07T14:45:51.000Z","updated_at":"2025-05-01T02:00:49.000Z","dependencies_parsed_at":"2023-12-23T19:09:45.141Z","dependency_job_id":"af2b72a4-b2af-48ec-bd52-287a49e575f3","html_url":"https://github.com/bvaughn/react-window","commit_stats":{"total_commits":343,"total_committers":38,"mean_commits":9.026315789473685,"dds":"0.33819241982507287","last_synced_commit":"8736ede0090a9652b81b7933affc52a26fe4d744"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bvaughn%2Freact-window","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bvaughn%2Freact-window/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bvaughn%2Freact-window/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bvaughn%2Freact-window/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bvaughn","download_url":"https://codeload.github.com/bvaughn/react-window/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252504253,"owners_count":21758663,"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","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":[],"created_at":"2024-07-30T17:01:10.367Z","updated_at":"2025-05-05T15:23:27.693Z","avatar_url":"https://github.com/bvaughn.png","language":"JavaScript","readme":"# react-window\n\n\u003e 高效渲染大数据列表和表格的react组件\n\nReact window基于仅渲染大数据中的部分数据（刚好填充满视窗）的方法，来帮助我们解决一些常见的的性能瓶颈问题：\n\n1. 它减少了初始渲染和处理更新时的耗时\n2. 减少内存占用，从而避免大量DOM节点引起的内存泄漏.\n\n[![NPM registry](https://img.shields.io/npm/v/react-window.svg?style=for-the-badge)](https://yarnpkg.com/en/package/react-window) [![Travis](https://img.shields.io/badge/ci-travis-green.svg?style=for-the-badge)](https://travis-ci.org/bvaughn/react-window) [![NPM license](https://img.shields.io/badge/license-mit-red.svg?style=for-the-badge)](LICENSE.md)\n\n## 安装\n\n```bash\n# Yarn\nyarn add react-window\n\n# NPM\nnpm install --save react-window\n```\n\n## 使用\n\nLearn more at [react-window.now.sh](https://react-window.now.sh/):\n\n## 相关库信息\n\n* [`react-virtualized-auto-sizer`](https://npmjs.com/package/react-virtualized-auto-sizer): 高阶组件：动态适配可用的空间，并且支持传入width和height值到子组件\n* [`react-window-infinite-loader`](https://npmjs.com/package/react-window-infinite-loader): 帮助大数据分组和根据视图滚动实时加载。也可以被用于无限加载的列表中(e.g. Facebook or Twitter).\n* [`react-vtree`](https://www.npmjs.com/package/react-vtree):\n一个轻量灵活的解决大数据目录结构渲染的库（比如文件系统目录结构）\n\n## 常见问题\n\n### `react-window`和`react-virtualized`有何不同?\n我几年前写了`react-virtualized`。当时，我对React和window的概念了解很浅。因此，我封装了一些API，但是后来我后悔了。原因之一是其中添加了太多没必要的特性和组件 。一旦你向开源项目添加些东西，删除它对用户是件很痛苦的事情\n\n`react-window` 基于 `react-virtualized`完全重写. 我不用尝试解决那么多遗留问题或者支持那么多用例. 相反我聚焦在让包体积更小，运行效率更高的问题上来。我也花了很多心思在设计API和文档上来，让其对初学者更友好（当然window仍然是种高级用例）。\n\n如果你的项目需要`react-window`提供的功能，我强烈建议用它替代`react-virtualized`. 然后如果需要一些仅`react-virtualized`提供的特性, 你有两个选择:\n\n1. 继续使用 `react-virtualized`. (它仍广泛的应用于各种成功案例)\n2. 创建一个封装了`react-window`基类的组件并且添加你需要的功能。你也可以发布这个组件到npm上 🙂\n\nPS: 添加一个`react-virtualized`列表到一个CRA(create-react-app)项目中, gzip构建包增加了33.5kb. 同样的的添加一个`react-window`列表到CRA项目中，gzip构建包仅增加了2kb\n\n\n### 一个列表或者网格结构可以100%填充页面的宽高么？\n\n可以. 我推荐使用 [`react-virtualized-auto-sizer` 库](https://npmjs.com/package/react-virtualized-auto-sizer):\n\n\u003cimg width=\"336\" alt=\"screen shot 2019-03-07 at 7 29 08 pm\" src=\"https://user-images.githubusercontent.com/29597/54005716-50f41880-410f-11e9-864f-a65bbdf49e07.png\"\u003e\n\n这是一个 [Sandbox上的例子](https://codesandbox.io/s/3vnx878jk5).\n\n### 页面滚动的时候为什么会出现空白?\n\n如果你的页面看起来像这样...\n\n\u003cimg src=\"https://user-images.githubusercontent.com/29597/54005352-eb535c80-410d-11e9-80b2-d3d02db1f599.gif\" width=\"302\" height=\"152\"\u003e\n\n...那么你有可能是忘记`style`参数了! react-window这样的库基于绝对定位来展示 (通过一个内联样式), 所以不要忘记绑定到你渲染的DOM元素上!\n\n\u003cimg width=\"257\" alt=\"screen shot 2019-03-07 at 7 21 48 pm\" src=\"https://user-images.githubusercontent.com/29597/54005433-45ecb880-410e-11e9-8721-420ff1a153da.png\"\u003e\n\n### 列表支持懒加载数据么?\n\n支持，推荐使用 [`react-window-infinite-loader` package](https://npmjs.com/package/react-window-infinite-loader):\n\n\u003cimg width=\"368\" alt=\"screen shot 2019-03-07 at 7 32 32 pm\" src=\"https://user-images.githubusercontent.com/29597/54006733-653a1480-4113-11e9-907b-08ca5e27b3f9.png\"\u003e\n\n这是一个 [Sandbox上的例子](https://codesandbox.io/s/5wqo7z2np4).\n\n### 可以绑定自定义属性和事件处理么?\n\n可以, 使用 `outerElementType` 属性.\n\n\u003cimg width=\"412\" alt=\"Screen Shot 2019-03-12 at 8 58 09 AM\" src=\"https://user-images.githubusercontent.com/29597/54215333-f9ee9a80-44a4-11e9-9142-34c67026d950.png\"\u003e\n\n这是一个 [Sandbox上的例子](https://codesandbox.io/s/4zqx79nww0).\n\n### 列表收尾可以添加padding么?\n\n可以, 虽然需要一点点内联样式.\n\n\u003cimg width=\"418\" alt=\"Screen Shot 2019-06-02 at 8 38 18 PM\" src=\"https://user-images.githubusercontent.com/29597/58774454-65ad4480-8576-11e9-8889-07044fd41393.png\"\u003e\n\n这是一个 [Sandbox上的例子](https://codesandbox.io/s/react-window-list-padding-dg0pq).\n\n### 列表的元素间可以添加gutter或者padding么?\n\n可以, 虽然需要一点点内联样式.\n\n\u003cimg width=\"416\" alt=\"Screen Shot 2019-03-26 at 6 33 56 PM\" src=\"https://user-images.githubusercontent.com/29597/55043972-c14ad700-4ff5-11e9-9caa-2e9f4d85f96c.png\"\u003e\n\n这是一个 [Sandbox上的例子](https://codesandbox.io/s/2w8wmlm89p).\n\n### 支持内部元素sticky处理么?\n\n支持，不过需要一点代码修改. 这是一个 [Sandbox上的例子](https://codesandbox.io/s/0mk3qwpl4l).\n\n## License\n\nMIT © [bvaughn](https://github.com/bvaughn)\n","funding_links":["https://github.com/sponsors/bvaughn","https://opencollective.com/brianvaughn","https://buymeacoffee.com/bvaughn"],"categories":["JavaScript","UI Components","Uncategorized","HarmonyOS","Data Tables \u0026 Grids","TypeScript","Front-end","React Virtualization","React [🔝](#readme)","React"],"sub_categories":["Infinite Scroll","Uncategorized","Windows Manager","Infinite Scroll / Virtualized List / Virtualized Tree","React","React Components","Component"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbvaughn%2Freact-window","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbvaughn%2Freact-window","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbvaughn%2Freact-window/lists"}