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

如题所述

第1个回答  2022-07-25
如果你的应用渲染了长列表(上百甚至上千的数据)时,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设计模式之观察者模式
相似回答