滚动时多次调用VirtualScroll rowRenderer方法 [英] VirtualScroll rowRenderer method is called many times while scrolling

问题描述

我有一个 react-virtualized's 无限滚动列表，（大部分设置都是从此示例）。我正在为它提供一个 rowRenderer 函数，如规格要求。如果 rowRenderer 函数非常轻量级（即返回一个非常基本的组件作为行），这可以正常工作。
但我的 RowComponent 的渲染在某些属性中包含一些 Array.map 。这不应该导致任何问题，除了 rowRenderer 函数在滚动时被称为 tens 或甚至数百次。这会导致性能问题，使滚动不够平滑。
到目前为止，我尝试过：

I have a react-virtualized's infinite scroll list, (Most of the setup is copied from this example). I'm providing it with a rowRenderer function like the specs requires. this works fine if the rowRenderer function is very lightweight (i.e returns a very basic component as row). but the rendering of my RowComponent includes some Array.map over some properties. this shouldn't cause any problem except that the rowRenderer functions is being called tens or even hundreds of times while scrolling. this causes a performance issue, making the scroll not smooth enough. So far I tried:

1. 缓存我的 rowRenderer 这是有效的，但是我不喜欢这个解决方案，因为它可能会在未来引起问题。


2. 让我的 RowComponent 的渲染功能纯净，使用 react-addons-shallow-compare 实现 shouldComponentUpdate 。这略微改善了性能但还不够。

1. Caching my rowRenderer this works, but I don't like this solution as it may cause problems in the future.
2. Make my RowComponent's render function pure and implement shouldComponentUpdate using react-addons-shallow-compare. this slightly improved the performance but not enough.

在这个例子，每个滚动也会多次调用 rowRenderer 函数（由于函数非常，因此没有执行问题轻量级），这让我相信这种行为是设计的。所以：

缓存是一个很好的解决方案吗？有关如何将其与我的应用程序状态同步的任何建议（我使用redux进行状态管理）？我在文档中遗漏了哪些内容可以减少对 rowRenderer 的调用（滚动时我的行没有变化的原因）？

In this example, the rowRenderer function is also being called many times per scroll (no perf issues there as the function is very lightweight), which makes me believe this behavior is by design. so:
Is caching a good solution? any advice in how to sync it with my app's state (I use redux for state management)? is there something I missed in the docs that can reduce calls to rowRenderer (there's no reason for my rows to change while scrolling)?

推荐答案

这里反应虚拟化的作者。

Author of react-virtualized here.

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

Your rowRenderer methods should be lightweight because, as you've found, they may be called rapidly when a user is scrolling. The good news is that- since browsers manage scrolling in a separate thread from the UI, this usually doesn't cause any performance problems. If anything, you may notice some empty/white space at the edge of the list in the direction you're scrolling- indicating that your renderers aren't able to keep up with the user's scrolling speed.

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

One caveat to be aware of though is that if you attach touch or wheel event handlers to a react-virtualized component or one of its DOM ancestors, this will force the browser to scroll in the main/UI thread. That can definitely cause slowness.

我目前在主要更新的中间（版本7 ）除其他外，它将命名参数传递给用户函数，如 rowRenderer 。这将使我能够传递元信息（如列表当前是否正在滚动），这可以使您在滚动过程中推迟重逻辑。不幸的是，这在版本6中是不可能的，除非你愿意使用超时，因为doron-zavelevsky提及。

I'm currently in the middle of a major update (version 7) which, among other things, will passed named arguments to user-functions like rowRenderer. This will enable me to pass meta information (like whether or not the list is currently scrolling) which could enable you to defer "heavy" logic while a scroll is in progress. Unfortunately this isn't possible in version 6 unless you're willing to use a timeout as doron-zavelevsky mentions.

编辑：你可以很高兴通过此提交了解到，进入即将发布的7版本。

Edit: You may be happy to learn that with this commit cell caching has made its way into the upcoming version 7 release.

这篇关于滚动时多次调用VirtualScroll rowRenderer方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！