README-zh_CN.md

react-window

高效渲染大数据列表和表格的react组件

React window基于仅渲染大数据中的部分数据（刚好填充满视窗）的方法，来帮助我们解决一些常见的的性能瓶颈问题：

1. 它减少了初始渲染和处理更新时的耗时
2. 减少内存占用，从而避免大量DOM节点引起的内存泄漏.

安装

# Yarn
yarn add react-window

# NPM
npm install --save react-window

使用

Learn more at react-window.now.sh:

相关库信息

• react-virtualized-auto-sizer: 高阶组件：动态适配可用的空间，并且支持传入width和height值到子组件
• react-window-infinite-loader: 帮助大数据分组和根据视图滚动实时加载。也可以被用于无限加载的列表中(e.g. Facebook or Twitter).
• react-vtree: 一个轻量灵活的解决大数据目录结构渲染的库（比如文件系统目录结构）

常见问题

react-window和react-virtualized有何不同?

我几年前写了react-virtualized。当时，我对React和window的概念了解很浅。因此，我封装了一些API，但是后来我后悔了。原因之一是其中添加了太多没必要的特性和组件 。一旦你向开源项目添加些东西，删除它对用户是件很痛苦的事情

react-window 基于 react-virtualized完全重写. 我不用尝试解决那么多遗留问题或者支持那么多用例. 相反我聚焦在让包体积更小，运行效率更高的问题上来。我也花了很多心思在设计API和文档上来，让其对初学者更友好（当然window仍然是种高级用例）。

如果你的项目需要react-window提供的功能，我强烈建议用它替代react-virtualized. 然后如果需要一些仅react-virtualized提供的特性, 你有两个选择:

1. 继续使用 react-virtualized. (它仍广泛的应用于各种成功案例)
2. 创建一个封装了react-window基类的组件并且添加你需要的功能。你也可以发布这个组件到npm上 🙂

PS: 添加一个react-virtualized列表到一个CRA(create-react-app)项目中, gzip构建包增加了33.5kb. 同样的的添加一个react-window列表到CRA项目中，gzip构建包仅增加了2kb

一个列表或者网格结构可以100%填充页面的宽高么？

可以. 我推荐使用 react-virtualized-auto-sizer 库:

这是一个 Sandbox上的例子.

页面滚动的时候为什么会出现空白?

如果你的页面看起来像这样...

...那么你有可能是忘记style参数了! react-window这样的库基于绝对定位来展示 (通过一个内联样式), 所以不要忘记绑定到你渲染的DOM元素上!

列表支持懒加载数据么?

支持，推荐使用 react-window-infinite-loader package:

这是一个 Sandbox上的例子.

可以绑定自定义属性和事件处理么?

可以, 使用 outerElementType 属性.

这是一个 Sandbox上的例子.

列表收尾可以添加padding么?

可以, 虽然需要一点点内联样式.

这是一个 Sandbox上的例子.

列表的元素间可以添加gutter或者padding么?

可以, 虽然需要一点点内联样式.

这是一个 Sandbox上的例子.

支持内部元素sticky处理么?

支持，不过需要一点代码修改. 这是一个 Sandbox上的例子.

License

MIT © bvaughn