反应组件以有效提供大列表和表格数据. 检查出来 演示 对于一些例子.
发起人
以下优秀公司赞助反应虚拟化:
谈谈 react-window
如果你考虑添加 react-virtualized 对一个项目,看看 react-window 作为可能较轻重量的替代品. 更多关于两个图书馆的比较.
开始
安装 react-virtualized 使用 npm.
npm install react-virtualized --save
ES6, CommunityJS, 和UMD Building 都随同发行. 例如:
// 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使这种优化本身,见 文档。 。 。 .
如果上述语法看起来过于繁琐,或者从很多地方导入反应虚拟化组件,也可以配置Webpack别名. 例如:
// Partial webpack.config.js
{
alias: {
'react-virtualized/List': 'react-virtualized/dist/es/List',
},
...rest
}
那你可以这样进口:
import List from 'react-virtualized/List';
// Now you can use <List {...props} />
您也可以使用全球友好的 UMD 架构 :
<link rel="stylesheet" href="path-to-react-virtualized/styles.css" />
<script src="path-to-react-virtualized/dist/umd/react-virtualized.js"></script>
现在你可以开始使用组件了. 您可以更多地了解哪些成份是虚拟的 下级。 。 。 .
依赖关系
虚拟反应的依赖性很少,大多数是由国家预防机制自动管理的.
但是,您的项目必须指定以下对等关系,以避免版本冲突:
react, (中文(简体) ),
react-dom。 。 。 .
国家防范机制不会自动为您安装这些设备,但会向您显示一个警告信息,并指示如何安装这些设备.
纯元件
默认情况下,所有反应虚拟组件都使用 shallowCompare 除非道具或状态已经改变,否则避免重新投降.
这偶尔会混淆用户,当收集的数据发生变化(例如: ['a','b','c'] => ['d','e','f'])但道具没有(例如 array.length) (中文(简体) ).
解决之道是让反应——虚拟化的知道外部的东西已经改变. 这可以采取几种不同的方式.
过轨道具
这个 shallowCompare 方法将检测任何道具的改变,即使它们没有被宣布为 propTypes。 。 。 .
这意味着您也可以通过影响单元格渲染的附加属性,以确保检测到变化.
例如,如果你在使用 List 生成一个清单,列出在初始渲染-反应-虚拟化后可能重新排序的项目,通常不会检测到排序操作,因为其处理的属性都没有变化.
然而,您可以通过额外的类属性来触发重交.
例如:
<List {...listProps} sortBy={sortBy} />
公共方法
Grid 财务报告和审定财务报表 Collection 组件可使用 forceUpdate。 。 。 .
对于 Table 财务报告和审定财务报表 List你需要打电话 forceUpdateGrid 确保内部 Grid 还更新。 对于 MultiGrid你需要打电话 forceUpdateGrids 确保内部 Grids 更新.
文档
API 文档可用 这里。 。 。 .
还有几种如何指导:
实例
每个组成部分的实例可见于 文件。 。 。 .
以下是每个组件的一些在线演示:
这里有一些“recipe”类型演示:
支持的浏览器
反应虚拟化的目标是支持iOS和Android的所有常绿浏览器和最近的移动浏览器. 也支持了IE 9+(虽然IE 9需要一些用户定义的自定义CSS,因为不支持弹性盒布局).
如果您发现浏览器特有的问题,请随复写例一起报告. 做这个最简单的方法 可能是放弃 这个管子。 。 。 .
朋友们
以下是一些在反应虚拟化的基础上构建的伟大组件:
- 反应-无限日历: 无限滚动取日期器, 有本地化、 主题、 键盘支持等
- 反应- 组合- hoc: 将任何列表变成动画、 触摸友好、 可排序列表的更高排序组件
- 反应- 类型- 树: 分级数据的可拖放排序
- 反应虚拟检查框: 包含大量选项虚拟化的复选框组组件
- 反应 - 虚拟化 - 选择: React 的下放菜单带有窗口支持大量选项.
- 反应-虚拟-树木: 反应性树构件,旨在以优雅和能动的方式提供大量树的结构数据
- 反应时间线- 9000: 能够显示和与大量项目互动的日历时间表组件
捐款
使用 GitHub 问题 请求.
我积极欢迎拉动请求;学习如何 贡献。 。 。 .
更改日志
变动在 更改日志。 。 。 .
许可证
反应虚拟化 根据《麻省理工学院许可证》提供.