记录React性能优化之“虚拟滚动”技术——react-window
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了记录React性能优化之“虚拟滚动”技术——react-window相关的知识，希望对你有一定的参考价值。
参考技术A 如果你的应用渲染了长列表（上百甚至上千的数据）时，React官网推荐我们使用“虚拟滚动”技术。这项技术会在有限的时间内仅渲染有限的内容，并奇迹般地降低重新渲染组件消耗的时间，以及创建 DOM 节点的数量。React官网推荐我们使用 react-window 和 react-virtualized 这2个热门的虚拟滚动库。它们提供了多种可复用的组件，用于展示列表、网格和表格数据。
这2个库，出自于同一个作者。react-virtualized是作者对React和窗口概念都不熟悉时写的，加了一些API和添加了太多非必要的功能和组件，后来作者后悔了，但因为一旦向开源项目添加了一些东西，删除它对用户来说是非常痛苦的。所以作者完整重写了react-virtualized，并且更专注于使包装更小和更快。所以 react-window 是react-virtualized的轻量级替代品。
我使用的是VariableSizeGrid（可变尺寸网格）。
问题1：使用itemData进行网格中数据的传递时，当columnCount（网格中的列数）*rowCount（网格中的行数）>itemData.length，会出现网格滚动到最后一行时，最后一行没有被渲染。
方案1：给itemData 数组push（columnCount*rowCount- itemData.length）个对象｛true:true｝，然后在组件render时，进行判断return（<div></div>）
问题2：网格可以100％填充页面的宽度或高度吗？（这个问题作者有在npm上回答过）
方案2：网格宽高必须传入number类型，所以不能直接写’100%’，需要使用react-virtualized-auto-sizer包。
问题3：这个比较重要，没有提供可以传递方法的API。提供了可以在外层附加自定义属性或事件处理程序的API：outerElementType。但不能满足我想要点击按钮时才触发事件的需求。
方案3： javascript设计模式之观察者模式
以上是关于记录React性能优化之“虚拟滚动”技术——react-window的主要内容，如果未能解决你的问题，请参考以下文章