React 中的速度比较：用于列排序的分页表与可滚动表

Posted 2023-03-10

【中文标题】React 中的速度比较：用于列排序的分页表与可滚动表

【英文标题】：Speed comparison in React: Paginated table vs Scrollable table for column sort

【发布时间】：2020-08-26 17:01:51

【问题描述】：

假设我们有两张表，一张是Paginated，另一张是Scrollable。两者都允许通过单击任何列标题对记录进行排序。

假设该表有 5000 个 6 列 的记录。当用户点击任一列进行排序时，我的理解是整个 5000 条记录都会被排序，我的表格状态也会被更新。

在分页的情况下，由于我只渲染

10 条记录/页

，因此渲染会很快。 如果是可滚动表，由于我正在渲染整个

5000

记录

，因此渲染会很慢。

我有一个项目要提前完成，它可能涉及大量数据记录，列排序是一项强制性功能。我想验证我对这个用例的渲染速度的理解是否正确？

在这两种情况下都有哪些优化可供我了解？

跟进：-

如果我要进行表格分页，我真的需要 react-window 或 react-virtualized 吗？

【问题讨论】：

在考虑性能优化之前，我会先考虑 UX。我是无限滚动的忠实粉丝，但在你的情况下，由于数据量巨大，简单的分页似乎是更好的用户体验。没有人愿意滚动几分钟而不是单击几个按钮。这也回答了您的性能问题，默认情况下，分页将在客户端执行。 （不过，你可以通过 react-virtualized 获得类似的性能，但需要做更多的工作，但为了用户体验，我建议不要这样做。）

如果您选择简单的分页，如果在前面，您将不会遇到性能问题。确保将正确的索引添加到您的数据库中，但也可以获得良好的后端性能。

【参考方案1】：

您认为分页表在渲染时比使用 5000 行渲染的整个表更快是正确的。此外，由于 UI 中有大量元素，5000 行的表格可能会导致浏览器速度变慢

但是，如果您使用虚拟化或窗口化等概念，而您只呈现视图中的数据量，则性能差异非常小。这是更快和优化的。

现在，如果您来到 UX 的观点。与可滚动表相比，用户可能会发现列排序效率更高的分页表。

有three main reasons，因此我会使用分页表并按列排序

当用户想要访问旧数据时，它更容易跳转页面，而不是一直向下滚动到它。

这是我最强烈的理由之一

当您使用分页并且用户决定更改排序顺序时，如果您也决定保持滚动可能会变得更加棘手。然而，分页顺利进行。要么留在同一页面上，要么移动第一个页面。无论哪种情况，都易于实施 如果您的数据增长，将所有数据保留在客户端可能会成为开销。在这种情况下，最好依靠 API 来获取数据。现在，在旅途中获取数据的虚拟化有时会变得很棘手，需要特别注意和详细了解预取

简而言之，最好使用分页，因为大表的用户体验和实现原因

【参考方案2】：

我认为这里的优化不是问题，两种方式都可以以相同的性能完成。

您提到了react-virtualized - 通常将其用作具有良好性能的可滚动表的解决方案，它使您能够仅呈现实际需要的这些字段。