滚动时多次调用VirtualScroll rowRenderer方法

Question

我有一个反应虚拟化的无限滚动列表，(大部分设置都是从这个例子复制的)。我向它提供了一个rowRenderer函数，就像规格所要求的那样。如果rowRenderer函数非常轻量级(即将一个非常基本的组件作为行返回)，这很好。但是，我的RowComponent的呈现包括一些属性上的Array.map。这不会引起任何问题，除非rowRenderer函数在滚动时被调用了几十次甚至数百次。这会导致性能问题，使滚动不够平滑。到目前为止我试过：

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

在这个例子中，每个滚动卷也会多次调用rowRenderer函数(因为该函数非常轻量级，因此没有perf问题)，这使我相信这种行为是设计出来的。因此：

缓存是一个好的解决方案吗？对于如何将其与我的应用程序的状态同步(我使用redux进行状态管理)，有什么建议吗？我在文档中遗漏了什么可以减少对rowRenderer的调用(我的行没有理由在滚动时更改)吗？

Answer 1

“反应虚拟化”的作者。

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

需要注意的一点是，如果将触摸或轮转事件处理程序附加到反应虚拟化组件或其DOM祖先之一，这将迫使浏览器在主/UI线程中滚动。这肯定会导致缓慢。

我目前是一个主要更新的在中间 (第7版)，它将把命名的参数传递给像rowRenderer这样的用户函数。这将使我能够传递元信息(比如列表当前是否正在滚动)，这些信息可以使您在滚动过程中延迟“重”逻辑。不幸的是，这在版本6中是不可能的，除非您愿意使用doron提到的超时。

编辑：您可能很高兴地了解到，使用此承诺单元缓存已经进入了即将发布的version 7版本。

Answer 2

根据我对这个库的经验(我没有使用最新版本)--这是设计的。这是有意义的-为了避免一次呈现所有列表-并允许您无限滚动-它要求您每次呈现当前查看的项目。您的目标是优化呈现功能--正如您自己提到的。还有一件事情可以改善您的整体体验，那就是检查和查看您的项目是否包含一些复杂的代码，是否包含在其componentDidMount生命周期方法中--或者运行后呈现的任何其他代码。如果是这样的话--您可以通过使用超时延迟这些计算来优化快速滚动，并且只有在超时结束时组件仍然被挂载时才允许它们运行。

考虑一下快速滚动项目以到达底部的情况--在到达那里的路上，完全填充所有滚动过去的项目是没有意义的。因此，您将尽可能快地返回呈现结果--在项目中等待200 as然后检查组件是否仍然挂载并执行实际工作。

由于isMounted已经过时，您可以简单地在componentDidMount期间将变量设置为true，然后将componentWillUnmount设置为false。