# @axosoft/react-virtualized 中文文档
规范地址：https://npmcn.com/package/%40axosoft/react-virtualized/
版本：9\.22\.3-gitkraken\.5
npm 元数据更新时间：2023-05-16T15:37:43.463Z
中文译文更新时间：2026-11-07T21:54:22.534Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40axosoft/react-virtualized
原文对照：https://npmcn.com/package/%40axosoft/react-virtualized/?lang=original
项目主页：https://github.com/bvaughn/react-virtualized
源码仓库：https://github.com/bvaughn/react-virtualized
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：2.3 MB，293 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：6 个
- peer 依赖：react ^15\.3\.0 \|\| ^16\.0\.0-alpha，react-dom ^15\.3\.0 \|\| ^16\.0\.0-alpha
- 首次发布：2019-10-09T17:40:31.196Z
- 最新版本发布：2023-05-16T15:37:43.277Z
- 近 30 天下载量：2344（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：9（近 12 个月 0 个）
## 中文简介
有效制作大、可滚动列表和表格数据的反应组件
## 安装
```sh
npm install @axosoft/react-virtualized
```
也可以使用：`pnpm add @axosoft/react-virtualized`、`yarn add @axosoft/react-virtualized`、`bun add @axosoft/react-virtualized`
## README
[](http://bvaughn.github.io/react-virtualized/)
[](https://www.npmjs.com/package/react-virtualized)  [](https://npmcharts.com/compare/react-virtualized?minimal=true) [](https://npmcharts.com/compare/react-virtualized?minimal=true) [](https://circleci.com/gh/bvaughn/react-virtualized/tree/master) [](https://codecov.io/github/bvaughn/react-virtualized) [](https://npmcn.com/package/%40axosoft/react-virtualized/#readme-backers) [](https://npmcn.com/package/%40axosoft/react-virtualized/#readme-sponsors)
反应组件以有效提供大列表和表格数据. 检查出来 [演示](https://bvaughn.github.io/react-virtualized/) 对于一些例子.
### 发起人
以下优秀公司赞助反应虚拟化:
[](https://www.treasuredata.com/) [](https://developer.hpe.com/) [](https://opencollective.com/react-virtualized/sponsor/0/website) [](https://opencollective.com/react-virtualized/sponsor/1/website) [](https://opencollective.com/react-virtualized/sponsor/2/website) [](https://opencollective.com/react-virtualized/sponsor/3/website) [](https://opencollective.com/react-virtualized/sponsor/4/website) [](https://opencollective.com/react-virtualized/sponsor/5/website) [](https://opencollective.com/react-virtualized/sponsor/6/website) [](https://opencollective.com/react-virtualized/sponsor/7/website) [](https://opencollective.com/react-virtualized/sponsor/8/website) [](https://opencollective.com/react-virtualized/sponsor/9/website) [](https://opencollective.com/react-virtualized/sponsor/10/website) [](https://opencollective.com/react-virtualized/sponsor/11/website) [](https://opencollective.com/react-virtualized/sponsor/12/website) [](https://opencollective.com/react-virtualized/sponsor/13/website) [](https://opencollective.com/react-virtualized/sponsor/14/website) [](https://opencollective.com/react-virtualized/sponsor/15/website) [](https://opencollective.com/react-virtualized/sponsor/16/website) [](https://opencollective.com/react-virtualized/sponsor/17/website) [](https://opencollective.com/react-virtualized/sponsor/18/website) [](https://opencollective.com/react-virtualized/sponsor/19/website) [](https://opencollective.com/react-virtualized/sponsor/20/website) [](https://opencollective.com/react-virtualized/sponsor/21/website) [](https://opencollective.com/react-virtualized/sponsor/22/website) [](https://opencollective.com/react-virtualized/sponsor/23/website) [](https://opencollective.com/react-virtualized/sponsor/24/website) [](https://opencollective.com/react-virtualized/sponsor/25/website) [](https://opencollective.com/react-virtualized/sponsor/26/website) [](https://opencollective.com/react-virtualized/sponsor/27/website) [](https://opencollective.com/react-virtualized/sponsor/28/website) [](https://opencollective.com/react-virtualized/sponsor/29/website)
[学着成为赞助商吧!](https://opencollective.com/react-virtualized#sponsor)
[](https://opencollective.com/react-virtualized/backer/0/website) [](https://opencollective.com/react-virtualized/backer/1/website) [](https://opencollective.com/react-virtualized/backer/2/website) [](https://opencollective.com/react-virtualized/backer/3/website) [](https://opencollective.com/react-virtualized/backer/4/website) [](https://opencollective.com/react-virtualized/backer/5/website) [](https://opencollective.com/react-virtualized/backer/6/website) [](https://opencollective.com/react-virtualized/backer/7/website) [](https://opencollective.com/react-virtualized/backer/8/website) [](https://opencollective.com/react-virtualized/backer/9/website) [](https://opencollective.com/react-virtualized/backer/10/website) [](https://opencollective.com/react-virtualized/backer/11/website) [](https://opencollective.com/react-virtualized/backer/12/website) [](https://opencollective.com/react-virtualized/backer/13/website) [](https://opencollective.com/react-virtualized/backer/14/website) [](https://opencollective.com/react-virtualized/backer/15/website) [](https://opencollective.com/react-virtualized/backer/16/website) [](https://opencollective.com/react-virtualized/backer/17/website) [](https://opencollective.com/react-virtualized/backer/18/website) [](https://opencollective.com/react-virtualized/backer/19/website) [](https://opencollective.com/react-virtualized/backer/20/website) [](https://opencollective.com/react-virtualized/backer/21/website) [](https://opencollective.com/react-virtualized/backer/22/website) [](https://opencollective.com/react-virtualized/backer/23/website) [](https://opencollective.com/react-virtualized/backer/24/website) [](https://opencollective.com/react-virtualized/backer/25/website) [](https://opencollective.com/react-virtualized/backer/26/website) [](https://opencollective.com/react-virtualized/backer/27/website) [](https://opencollective.com/react-virtualized/backer/28/website) [](https://opencollective.com/react-virtualized/backer/29/website)
## 谈谈 `react-window`
如果你考虑添加 `react-virtualized` 对一个项目,看看 [`react-window`](https://github.com/bvaughn/react-window) 作为可能较轻重量的替代品. [更多关于两个图书馆的比较.](https://github.com/bvaughn/react-window#how-is-react-window-different-from-react-virtualized)
## 开始
安装 `react-virtualized` 使用 npm.
```shell
npm install react-virtualized --save
```
ES6, CommunityJS, 和UMD Building 都随同发行. 例如:
```js
// Most of react-virtualized's styles are functional (eg position, size).
// Functional styles are applied directly to DOM elements.
// The Table component ships with a few presentational styles as well.
// They are optional, but if you want them you will need to also import the CSS file.
// This only needs to be done once; probably during your application's bootstrapping process.
import 'react-virtualized/styles.css';
// You can import any component you want as a named export from 'react-virtualized', eg
import {Column, Table} from 'react-virtualized';
// But if you only use a few react-virtualized components,
// And you're concerned about increasing your application's bundle size,
// You can directly import only the components you need, like so:
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import List from 'react-virtualized/dist/commonjs/List';
```
注:Webpack 4使这种优化本身,见 [文档](https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free)。 。 。 .
如果上述语法看起来过于繁琐,或者从很多地方导入反应虚拟化组件,也可以配置Webpack别名. 例如:
```js
// Partial webpack.config.js
{
alias: {
'react-virtualized/List': 'react-virtualized/dist/es/List',
},
...rest
}
```
那你可以这样进口:
```js
import List from 'react-virtualized/List';
// Now you can use
```
您也可以使用全球友好的 UMD 架构 :
```html
```
现在你可以开始使用组件了. 您可以更多地了解哪些成份是虚拟的 [下级](https://npmcn.com/package/%40axosoft/react-virtualized/#readme-documentation)。 。 。 .
## 依赖关系
虚拟反应的依赖性很少,大多数是由国家预防机制自动管理的. 但是,您的项目必须指定以下对等关系,以避免版本冲突: [`react`](https://www.npmjs.com/package/react), (中文(简体) ), [`react-dom`](https://www.npmjs.com/package/react-dom)。 。 。 . 国家防范机制不会自动为您安装这些设备,但会向您显示一个警告信息,并指示如何安装这些设备.
## 纯元件
默认情况下,所有反应虚拟组件都使用 [`shallowCompare`](https://facebook.github.io/react/docs/shallow-compare.html) 除非道具或状态已经改变,否则避免重新投降. 这偶尔会混淆用户,当收集的数据发生变化(例如: `['a','b','c']` => `['d','e','f']`)但道具没有(例如 `array.length`) (中文(简体) ).
解决之道是让反应——虚拟化的知道外部的东西已经改变. 这可以采取几种不同的方式.
###### 过轨道具
这个 `shallowCompare` 方法将检测任何道具的改变,即使它们没有被宣布为 `propTypes`。 。 。 . 这意味着您也可以通过影响单元格渲染的附加属性,以确保检测到变化. 例如,如果你在使用 `List` 生成一个清单,列出在初始渲染-反应-虚拟化后可能重新排序的项目,通常不会检测到排序操作,因为其处理的属性都没有变化. 然而,您可以通过额外的类属性来触发重交. 例如:
```js
```
###### 公共方法
`Grid` 财务报告和审定财务报表 `Collection` 组件可使用 [`forceUpdate`](https://facebook.github.io/react/docs/component-api.html#forceupdate)。 。 。 . 对于 `Table` 财务报告和审定财务报表 `List`你需要打电话 [`forceUpdateGrid`](https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md#forceupdategrid) 确保内部 `Grid` 还更新。 对于 `MultiGrid`你需要打电话 [`forceUpdateGrids`](https://github.com/bvaughn/react-virtualized/blob/master/docs/MultiGrid.md#forceupdategrids) 确保内部 `Grid`s 更新.
## 文档
API 文档可用 [这里](https://npmcn.com/package/%40axosoft/react-virtualized/docs/README.md)。 。 。 .
还有几种如何指导:
- [自定义类和样式](https://npmcn.com/package/%40axosoft/react-virtualized/docs/customizingStyles.md)
- [按倒序显示项目](https://npmcn.com/package/%40axosoft/react-virtualized/docs/reverseList.md)
- [使用自动监视器](https://npmcn.com/package/%40axosoft/react-virtualized/docs/usingAutoSizer.md)
- [创建无限加载列表](https://npmcn.com/package/%40axosoft/react-virtualized/docs/creatingAnInfiniteLoadingList.md)
- [自然排序表](https://npmcn.com/package/%40axosoft/react-virtualized/docs/tableWithNaturalSort.md)
- [按多列排序表格](https://npmcn.com/package/%40axosoft/react-virtualized/docs/multiColumnSortTable.md)
## 实例
每个组成部分的实例可见于 [文件](https://npmcn.com/package/%40axosoft/react-virtualized/docs/README.md)。 。 。 .
以下是每个组件的一些在线演示:
- [箭头KeyStepper](https://bvaughn.github.io/react-virtualized/#/components/ArrowKeyStepper)
- [自动监视器](https://bvaughn.github.io/react-virtualized/#/components/AutoSizer)
- [单元格聚合器](https://bvaughn.github.io/react-virtualized/#/components/CellMeasurer)
- [收藏](https://bvaughn.github.io/react-virtualized/#/components/Collection)
- [列监视器](https://bvaughn.github.io/react-virtualized/#/components/ColumnSizer)
- [网格](https://bvaughn.github.io/react-virtualized/#/components/Grid)
- [无穷潜入](https://bvaughn.github.io/react-virtualized/#/components/InfiniteLoader)
- [列表](https://bvaughn.github.io/react-virtualized/#/components/List)
- [共济会](https://bvaughn.github.io/react-virtualized/#/components/Masonry)
- [多绿色](https://bvaughn.github.io/react-virtualized/#/components/MultiGrid)
- [滚动同步](https://bvaughn.github.io/react-virtualized/#/components/ScrollSync)
- [图表](https://bvaughn.github.io/react-virtualized/#/components/Table)
- [窗口滚动器](https://bvaughn.github.io/react-virtualized/#/components/WindowScroller)
这里有一些“recipe”类型演示:
- [可重排( 拖放) 列的表格](https://codesandbox.io/s/j30k46l7xw)
- [可折叠树视图](https://rawgit.com/bvaughn/react-virtualized/master/playground/tree.html)
- [全页网格( 电子表格)](https://rawgit.com/bvaughn/react-virtualized/master/playground/grid.html)
- [动态单元格测量](https://rawgit.com/bvaughn/react-virtualized/master/playground/chat.html)
- [单元格徘徊效果](https://rawgit.com/bvaughn/react-virtualized/master/playground/hover.html)
## 支持的浏览器
反应虚拟化的目标是支持iOS和Android的所有常绿浏览器和最近的移动浏览器. 也支持了IE 9+(虽然IE 9需要一些用户定义的自定义CSS,因为不支持弹性盒布局).
如果您发现浏览器特有的问题,请随复写例一起报告. 做这个最简单的方法 可能是放弃 [这个管子](https://plnkr.co/edit/6syKo8cx3RfoO96hXFT1)。 。 。 .
## 朋友们
以下是一些在反应虚拟化的基础上构建的伟大组件:
- [反应-无限日历](https://github.com/clauderic/react-infinite-calendar): 无限滚动取日期器, 有本地化、 主题、 键盘支持等
- [反应- 组合- hoc](https://github.com/clauderic/react-sortable-hoc): 将任何列表变成动画、 触摸友好、 可排序列表的更高排序组件
- [反应- 类型- 树](https://github.com/fritz-c/react-sortable-tree): 分级数据的可拖放排序
- [反应虚拟检查框](https://github.com/emilebres/react-virtualized-checkbox): 包含大量选项虚拟化的复选框组组件
- [反应 - 虚拟化 - 选择](https://github.com/bvaughn/react-virtualized-select): React 的下放菜单带有窗口支持大量选项.
- [反应-虚拟-树木](https://github.com/diogofcunha/react-virtualized-tree/): 反应性树构件,旨在以优雅和能动的方式提供大量树的结构数据
- [反应时间线- 9000](https://github.com/BHP-DevHub/react-timeline-9000/): 能够显示和与大量项目互动的日历时间表组件
## 捐款
使用 [GitHub 问题](https://github.com/bvaughn/react-virtualized/issues) 请求.
我积极欢迎拉动请求;学习如何 [贡献](https://github.com/bvaughn/react-virtualized/blob/master/CONTRIBUTING.md)。 。 。 .
## 更改日志
变动在 [更改日志](https://github.com/bvaughn/react-virtualized/blob/master/CHANGELOG.md)。 。 。 .
## 许可证
_反应虚拟化_ 根据《麻省理工学院许可证》提供.
## 常见问题
### @axosoft/react-virtualized 是什么？
有效制作大、可滚动列表和表格数据的反应组件
### 如何安装 @axosoft/react-virtualized？
在项目目录运行 npm install @axosoft/react-virtualized，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^15\.3\.0 \|\| ^16\.0\.0-alpha）、react-dom（^15\.3\.0 \|\| ^16\.0\.0-alpha）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @axosoft/react-virtualized 支持 TypeScript 吗？
该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/axosoft\_\_react-virtualized 是否存在。
### @axosoft/react-virtualized 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @axosoft/react-virtualized 可以商用吗？
@axosoft/react-virtualized 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @axosoft/react-virtualized 的下载量有多少？
根据 npm 官方下载统计，@axosoft/react-virtualized 在 2026/10/08 – 2026/11/06 这 30 天内被下载 2,344 次，日均约 78 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @axosoft/react-virtualized 还在维护吗？
最新版本 9\.22\.3-gitkraken\.5 发布于 2023/05/16（3 年前）；至今共发布 9 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/10/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。