问题标签 [react-virtualized]

我有一个react-virtualized 的无限滚动列表，（大部分设置都是从​​这个例子复制而来的）。我正在为它提供规范rowRenderer所需的功能。如果该函数非常轻量级（即返回一个非常基本的组件作为行），则此方法可以正常工作。但我的渲染包括一些超过一些属性。这应该不会导致任何问题，除非函数在滚动时被调用数十次甚至数百次。这会导致性能问题，使滚动不够平滑。到目前为止，我尝试过：rowRendererRowComponentArray.maprowRenderer

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

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

全部，

我正在尝试结合 FlexTable 和 AutoSizer（来自 react-virtualized），但不断收到一个我不太明白原因的错误。据我所见，我已经遵循了这些示例，但我一定犯了一些错误。

我的渲染方法以以下结尾

发生的事情是控制台向我显示以下警告，并且该表从未呈现。

警告：失败的 propType：children提供给 的 prop 无效AutoSizer，需要一个 ReactElement。检查Table.

和

Uncaught Invariant Violation：onlyChild 必须传递一个只有一个孩子的孩子。

现在，我确实明白它告诉我的意思，我只是看不到 AutoSizer 标记是如何被赋予更多的一个孩子的。唯一的孩子不是 FlexTable 组件吗？

此致

丹尼尔·索德林

是否可以同时使用反应虚拟化和酶？当我尝试将它们一起使用时，我似乎在网格中得到了一个空的项目列表。

AutoSizer 的宽度给了我一个合适的值，我一直得到一个 Autosizer 高度为 0，这导致 VirtualScroll 组件不显示。但是，如果我使用 disableHeight 属性并为 VirtualScroll 提供一个固定的高度值（即 200 像素），VirtualScroll 会按预期显示行。任何人都可以看到有什么问题吗？

最终，Autosizer 应该存在于 Material-ui Dialog 组件中，但我也尝试过简单地将 autosizer 渲染到 div 中。同样的问题。

当所有单元格内容始终可见（长文本）时，是否可以在 FlexTable 中呈现单元格，就像用于 Grid 但用于 FlexTable 的 CellMeasurer？

谢谢你！

我已经安装了 15.2.1 版的 react、react-addons-shallow-compare 和 react-dom。当我尝试使用 react-virtualized 时，Chrome 控制台上出现错误提示

在不使用 react-virtualized 的情况下，React 可以正常工作。不知道为什么我会收到这个错误。

是否可以像在固定数据表中一样在反应虚拟化中添加两个标题行？我希望能够让第一个标题行中的一些列跨越几列来对第二行的列进行分类。

我正在使用 react-virtualized 库来创建高效的新闻提要。图书馆真棒。我结合了 WindowScroller、AutoSizer 和 VirtualScroll 组件来实现无限滚动行为。问题是当我手动设置 VirtualScroll 高度并且不使用 WindowScroller 时，所有浏览器的性能都很好。但是，当我添加 WindowScroller 组件时，性能会显着降低，尤其是在 Firefox (v47.0) 中。我该如何优化它以便使用窗口滚动是可行的？

这是 News 组件，其中使用了 react-virtualized，我有 2 种类型的列表项 - 标题项和简单项，标题项包含一组新闻的日期，因此它有点长。

列表项是以下组件：

这里的NewsItemContent是一个简单的纯组件，没有任何逻辑，这里就不放了。

谢谢！

更新：我在 Firefox 中记录了窗口滚动和块滚动的性能时间线：

• 块滚动
• 窗口滚动

react-virtualized 的组件 InfiniteLoader需要作为属性 loadMoreRows 传递的函数具有类似{ startIndex: number, stopIndex: number }): Promise. 我在我的项目中使用了 redux，所以loadMoreRows像这样的 redux action creator：

之后，此操作使用 react-redux 的连接函数连接到包含 InfiniteLoader 的反应组件。

所以我不确定，我怎样才能满足签名要求，因为 redux 动作创建者不返回任何值/

我刚开始使用 react-virtualized 并设置了 InfiniteLoader->AutoSizer->VirtualScroller。不幸的是，延迟加载的行并没有立即得到它们的道具。它们呈现好像道具为空或未定义。如果我滚动过去然后滚动回它们，它们就会正确呈现。此外，除了最初的预取行之外，如果我慢慢滚动，所有新行都可以呈现。但是，如果我让滚轮飞起来，它将“降落”在一组“子渲染”行上。鉴于下面的代码，我做错了什么？