|
| 1 | +# react-window |
| 2 | + |
| 3 | +> 高效渲染大数据列表和表格的react组件 |
| 4 | +
|
| 5 | +React window基于仅渲染大数据中的部分数据(刚好填充满视窗)的方法,来帮助我们解决一些常见的的性能瓶颈问题: |
| 6 | + |
| 7 | +1. 它减少了初始渲染和处理更新是的耗时 |
| 8 | +2. 减少内存占用,从而避免大量DOM节点引起的内存泄漏. |
| 9 | + |
| 10 | +[](https://yarnpkg.com/en/package/react-window) [](https://travis-ci.org/bvaughn/react-window) [](LICENSE.md) |
| 11 | + |
| 12 | +## 安装 |
| 13 | + |
| 14 | +```bash |
| 15 | +# Yarn |
| 16 | +yarn add react-window |
| 17 | + |
| 18 | +# NPM |
| 19 | +npm install --save react-window |
| 20 | +``` |
| 21 | + |
| 22 | +## 使用 |
| 23 | + |
| 24 | +Learn more at [react-window.now.sh](https://react-window.now.sh/): |
| 25 | + |
| 26 | +## 相关库信息 |
| 27 | + |
| 28 | +* [`react-virtualized-auto-sizer`](https://npmjs.com/package/react-virtualized-auto-sizer): 高阶组件:动态适配可用的空间,并且支持传入width和height值到子组件 |
| 29 | +* [`react-window-infinite-loader`](https://npmjs.com/package/react-window-infinite-loader): 帮助大数据分组和根据视图滚动实时加载。也可以被用于UC华UN构建无限加载的列表中(e.g. Facebook or Twitter). |
| 30 | +* [`react-vtree`](https://www.npmjs.com/package/react-vtree): |
| 31 | +一个轻量灵活的解决大数据目录结构渲染的库(比如文件系统目录结构) |
| 32 | + |
| 33 | +## 常见问题 |
| 34 | + |
| 35 | +### `react-window`和`react-virtualized`有何不同? |
| 36 | +我几年前写了`react-virtualized`。当时,我对React和window的概念了解很浅。因此,我封装了一些API,但是后来我后悔了。原因之一是其中添加了太多没必要的特性和组件 。一旦你向开源项目添加些东西,删除它对用户是件很痛苦的事情 |
| 37 | + |
| 38 | +`react-window` 基于 `react-virtualized`完全重写. 我不用尝试解决那么多遗留问题或者支持那么多用例. 相反我聚焦在让包体积更小,运行效率更高的问题上来。我也花了很多心思在设计API和文档上来,让其对初学者更友好(当然window仍然是种高级用例)。 |
| 39 | + |
| 40 | +如果你的项目需要`react-window`提供的功能,我强烈建议用它替代`react-virtualized`. 然后如果需要一些仅`react-virtualized`提供的特性, 你有两个选择: |
| 41 | + |
| 42 | +1. 继续使用 `react-virtualized`. (它仍广泛的应用于各种成功案例) |
| 43 | +2. 创建一个封装了`react-window`基类的组件并且添加你需要的功能。你也可以发布这个组件到npm上 🙂 |
| 44 | + |
| 45 | +PS: 添加一个`react-virtualized`列表到一个CRA(create-react-app)项目中, gzip构建包增加了33.5kb. 同样的的添加一个`react-window`列表到CRA项目中,gzip构建包仅增加了2kb |
| 46 | + |
| 47 | + |
| 48 | +### 一个列表或者网格结构可以100%填充页面的宽高么? |
| 49 | + |
| 50 | +可以. 我推荐使用 [`react-virtualized-auto-sizer` 库](https://npmjs.com/package/react-virtualized-auto-sizer): |
| 51 | + |
| 52 | +<img 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"> |
| 53 | + |
| 54 | +这是一个 [Sandbox上的例子](https://codesandbox.io/s/3vnx878jk5). |
| 55 | + |
| 56 | +### 页面滚动的时候为什么会出现空白? |
| 57 | + |
| 58 | +如果你的页面看起来像这样... |
| 59 | + |
| 60 | +<img src="https://user-images.githubusercontent.com/29597/54005352-eb535c80-410d-11e9-80b2-d3d02db1f599.gif" width="302" height="152"> |
| 61 | + |
| 62 | +...那么你有可能是忘记`style`参数了! react-window这样的库基于绝对定位来展示 (通过一个内联样式), 所以不要忘记绑定到你渲染的DOM元素上! |
| 63 | + |
| 64 | +<img 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"> |
| 65 | + |
| 66 | +### 列表支持懒加载数据么? |
| 67 | + |
| 68 | +支持,我推荐使用 [`react-window-infinite-loader` package](https://npmjs.com/package/react-window-infinite-loader): |
| 69 | + |
| 70 | +<img 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"> |
| 71 | + |
| 72 | +这是一个 [Sandbox上的例子](https://codesandbox.io/s/5wqo7z2np4). |
| 73 | + |
| 74 | +### 可以绑定自定义属性和事件处理么? |
| 75 | + |
| 76 | +可以, using the `outerElementType` prop. |
| 77 | + |
| 78 | +<img 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"> |
| 79 | + |
| 80 | +这是一个 [Sandbox上的例子](https://codesandbox.io/s/4zqx79nww0). |
| 81 | + |
| 82 | +### 列表收尾可以添加padding么? |
| 83 | + |
| 84 | +可以, 虽然需要一点点内联样式. |
| 85 | + |
| 86 | +<img 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"> |
| 87 | + |
| 88 | +这是一个 [Sandbox上的例子](https://codesandbox.io/s/react-window-list-padding-dg0pq). |
| 89 | + |
| 90 | +### 列表的元素间可以添加gutter或者padding么? |
| 91 | + |
| 92 | +可以, 虽然需要一点点内联样式. |
| 93 | + |
| 94 | +<img 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"> |
| 95 | + |
| 96 | +这是一个 [Sandbox上的例子](https://codesandbox.io/s/2w8wmlm89p). |
| 97 | + |
| 98 | +### 支持内部元素sticky处理么? |
| 99 | + |
| 100 | +支持,不过需要一点代码修改. 这是一个 [Sandbox上的例子](https://codesandbox.io/s/0mk3qwpl4l). |
| 101 | + |
| 102 | +## License |
| 103 | + |
| 104 | +MIT © [bvaughn](https://github.com/bvaughn) |
0 commit comments