javascript - 滚动时多次调用 VirtualScroll rowRenderer 方法

Question

我有一个 react-virtualized's无限滚动列表，(大部分设置是从 this example 复制的)。我为它提供了一个 rowRenderer 函数，例如 specs需要。如果 rowRenderer 函数是非常轻量级的(即返回一个非常基本的组件作为行)，这就可以正常工作。但是我的 RowComponent 的呈现包含一些 Array.map 一些属性。这应该不会导致任何问题，除非 rowRenderer 函数在滚动时被调用 十次 甚至 数百次 次。这会导致性能问题，使滚动不够平滑。到目前为止我试过:

1. 缓存我的 rowRenderer 这行得通，但我不喜欢这个解决方案，因为它可能会在未来引起问题。
2. 使我的 RowComponent 的渲染函数纯净并使用 react-addons-shallow-compare 实现 shouldComponentUpdate。这略微提高了性能，但还不够。

在this example ，rowRenderer 函数在每次滚动时也被调用多次(没有性能问题，因为该函数非常轻量级)，这让我相信这种行为是设计使然。所以:
缓存是一个好的解决方案吗？关于如何将它与我的应用程序状态同步的任何建议(我使用 redux 进行状态管理)？我在文档中遗漏了什么可以减少对 rowRenderer 的调用(没有理由在滚动时更改我的行)？

Answer 1

这里是 react-virtualized 的作者。

您的 rowRenderer 方法应该是轻量级的，因为正如您发现的那样，当用户滚动时它们可能会被快速调用。好消息是——由于浏览器在与 UI 不同的线程中管理滚动，这通常不会导致任何性能问题。如果有的话，您可能会注意到在滚动方向的列表边缘有一些空白区域 - 表明您的渲染器无法跟上用户的滚动速度。

但要注意的一个警告是，如果您将触摸或滚轮事件处理程序附加到 react 虚拟化组件或其 DOM 祖先之一，这将强制浏览器在主/UI 线程中滚动。这肯定会导致速度变慢。

我现在 in the middle主要更新 (version 7) 的一部分，其中包括将命名参数传递给 rowRenderer 等用户函数。这将使我能够传递元信息(比如列表当前是否正在滚动)，这可以让您在滚动过程中推迟“繁重”的逻辑。不幸的是，这在版本 6 中是不可能的，除非您愿意像 doron-zavelevsky 提到的那样使用超时。

编辑:您可能会很高兴通过 this commit 了解这一点单元缓存已进入即将发布的版本 7。