反应虚拟化 CellMeasurer 性能

Posted 2023-02-21

【中文标题】反应虚拟化 CellMeasurer 性能

【英文标题】：react-virtualized CellMeasurer performance

【发布时间】：2018-07-27 02:10:24

【问题描述】：

我计划对我的项目实施反应虚拟化，因为当前的解决方案无法处理动态高度。

就我而言，列表具有不同高度的项目（高度取决于内容）。此外，这些项目可以根据需要扩大和减少。 react-virtualized 能用流畅的动画处理这种功能吗？

【参考方案1】：

它对我们很有效。我们正在使用 MultiGrid（这样我们可以有行和列标题），我们也有可变的行高。这需要使用 CellMeasurer。然而，需要注意的一件事是，当使用可变行高时，当您有很多列时，性能确实会受到影响。即使单元格被虚拟化，它们仍然必须“渲染”（测量）行中的每个单元格，以确定该行的行高。我发现在这种配置中，50 列大约是合理性能的上限。对于固定高度的行，这根本不是问题。我们正在考虑使用一种算法，该算法根据我们对数据的了解来定义行高，以避免在我们有 > 50 列的情况下使用 CellMeasurer。这意味着我们将使用 rowHeight 函数。 Brian 在文档中有一个链接，讨论了使用 CellMeasurer 的性能问题： https://github.com/bvaughn/react-virtualized/blob/master/docs/CellMeasurer.md#limitations-and-performance-considerations

【讨论】：

鼓励链接到外部资源，但请在链接周围添加上下文，以便您的其他用户了解它是什么以及为什么存在。始终引用重要链接中最相关的部分，以防目标站点无法访问或永久离线。