记录React性能优化之“虚拟滚动”技术——react-window

UI更新需要昂贵的 DOM 操作，而 React 内部使用几种巧妙的技术以便最小化 DOM 操作次数。对于大部分应用而言，使用 React 时无需专门优化就已拥有高性能的用户界面。尽管如此，你仍然有办法来加速你的 React 应用。

1. 虚拟化长列表

如果你的应用渲染了长列表（上百甚至上千的数据）时，React官网推荐我们使用“虚拟滚动”技术。这项技术会在有限的时间内仅渲染有限的内容，并奇迹般地降低重新渲染组件消耗的时间，以及创建 DOM 节点的数量。

React官网推荐我们使用react-window和 react-virtualized 这2个热门的虚拟滚动库。它们提供了多种可复用的组件，用于展示列表、网格和表格数据。

2. react-window与react-virtualized有什么不同？

这2个库，出自于同一个作者。react-virtualized是作者对React和窗口概念都不熟悉时写的，加了一些API和添加了太多非必要的功能和组件，后来作者后悔了，但因为一旦向开源项目添加了一些东西，删除它对用户来说是非常痛苦的。所以作者完整重写了react-virtualized，并且更专注于使包装更小和更快。所以react-window是react-virtualized的轻量级替代品。

3.使用react-window网格的问题和解决方案

我使用的是VariableSizeGrid（可变尺寸网格）。

问题1：使用itemData进行网格中数据的传递时，当columnCount（网格中的列数）*rowCount（网格中的行数）>itemData.length，会出现网格滚动到最后一行时，最后一行没有被渲染。

方案1：给itemData 数组push（columnCount*rowCount- itemData.length）个对象｛true:true｝，然后在组件render时，进行判断return（

）

问题2：网格可以100％填充页面的宽度或高度吗？（这个问题作者有在npm上回答过）

方案2：网格宽高必须传入number类型，所以不能直接写’100%’，需要使用react-virtualized-auto-sizer包。

问题3：这个比较重要，没有提供可以传递方法的API。提供了可以在外层附加自定义属性或事件处理程序的API：outerElementType。但不能满足我想要点击按钮时才触发事件的需求。

方案3：JavaScript设计模式之观察者模式