VirtualScroll rowRenderer方法在滚动时被调用多次

VirtualScroll rowRenderer method is called many times while scrolling

本文关键字：调用 滚动 rowRenderer 方法 VirtualScroll      更新时间：2023-09-26

我有一个react虚拟化的无限滚动列表（大部分设置都是从这个例子中复制的）。我为它提供了一个rowRenderer函数，就像规范所要求的那样。如果rowRenderer函数是非常轻量级的（即返回一个非常基本的组件作为行），那么这就可以很好地工作。但是我的CCD_ 3的呈现在一些属性上包括一些CCD_。这应该不会引起任何问题，除了rowRenderer函数在滚动时被调用数十次甚至数百次

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

在本例中，rowRenderer函数在每次滚动中也被调用多次（由于该函数非常轻量级，因此没有性能问题），这让我相信这种行为是故意的。因此：
缓存是一个好的解决方案吗？关于如何将其与应用程序的状态同步（我使用redux进行状态管理），有什么建议吗？我在文档中是否遗漏了一些可以减少对rowRenderer调用的内容（滚动时没有理由更改我的行）？

react的作者在此虚拟化。

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

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

我目前正在进行一次重大更新（版本7），其中包括将命名参数传递给rowRenderer等用户函数。这将使我能够传递元信息（比如列表当前是否正在滚动），这可以使您在滚动过程中推迟"重"逻辑。不幸的是，这在版本6中是不可能的，除非你愿意像doron zavelevsky提到的那样使用超时。

编辑：您可能很高兴地了解到，通过此提交，单元缓存已进入即将发布的版本7。

根据我使用这个库的经验（虽然我没有使用最新版本），这是设计的。这是有道理的——为了避免一次渲染所有列表，并允许您无限滚动——它每次都会要求您渲染当前查看的项目。您的目标是优化渲染功能——正如您自己所提到的。还有一件事可以改善你的整体体验，那就是检查你的物品在其componentDidMount生命周期方法中是否包含一些复杂的代码，或者任何其他在渲染后运行的代码。如果是这样的话，您可以通过延迟这些计算并超时来优化快速滚动，并且只有在超时后组件仍处于安装状态时才允许它们运行。

考虑一下你快速滚动项目到达底部的情况——在到达底部的路上完全填充你滚动经过的所有项目是没有意义的。因此，您可以尽可能快地返回渲染结果，在项目内部等待约200ms，然后检查组件是否仍在安装并执行实际工作。

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

相关文章：