我有一个 react-virtualized's无限滚动列表,(大部分设置是从 this example 复制的)。我为它提供了一个 rowRenderer
函数,例如 specs需要。如果 rowRenderer
函数是非常轻量级的(即返回一个非常基本的组件作为行),这就可以正常工作。
但是我的 RowComponent
的呈现包含一些 Array.map
一些属性。这应该不会导致任何问题,除非 rowRenderer
函数在滚动时被调用 十次 甚至 数百次 次。这会导致性能问题,使滚动不够平滑。
到目前为止我试过:
- 缓存我的
rowRenderer
这行得通,但我不喜欢这个解决方案,因为它可能会在未来引起问题。 - 使我的
RowComponent
的渲染函数纯净并使用react-addons-shallow-compare
实现shouldComponentUpdate
。这略微提高了性能,但还不够。
在this example ,rowRenderer
函数在每次滚动时也被调用多次(没有性能问题,因为该函数非常轻量级),这让我相信这种行为是设计使然。所以:
缓存是一个好的解决方案吗?关于如何将它与我的应用程序状态同步的任何建议(我使用 redux 进行状态管理)?我在文档中遗漏了什么可以减少对 rowRenderer
的调用(没有理由在滚动时更改我的行)?
最佳答案
这里是 react-virtualized 的作者。
您的 rowRenderer
方法应该是轻量级的,因为正如您发现的那样,当用户滚动时它们可能会被快速调用。好消息是——由于浏览器在与 UI 不同的线程中管理滚动,这通常不会导致任何性能问题。如果有的话,您可能会注意到在滚动方向的列表边缘有一些空白区域 - 表明您的渲染器无法跟上用户的滚动速度。
但要注意的一个警告是,如果您将触摸或滚轮事件处理程序附加到 react 虚拟化组件或其 DOM 祖先之一,这将强制浏览器在主/UI 线程中滚动。这肯定会导致速度变慢。
我现在 in the middle主要更新 (version 7) 的一部分,其中包括将命名参数传递给 rowRenderer
等用户函数。这将使我能够传递元信息(比如列表当前是否正在滚动),这可以让您在滚动过程中推迟“繁重”的逻辑。不幸的是,这在版本 6 中是不可能的,除非您愿意像 doron-zavelevsky 提到的那样使用超时。
编辑:您可能会很高兴通过 this commit 了解这一点单元缓存已进入即将发布的版本 7。
关于javascript - 滚动时多次调用 VirtualScroll rowRenderer 方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37049280/