React 中的速度比较:用于列排序的分页表与可滚动表 [英] Speed comparison in React: Paginated table vs Scrollable table for column sort

问题描述

假设我们有两个表格，一个是分页，另一个是可滚动.两者都允许通过单击任何列标题对记录进行排序.

Suppose we have two tables, one is Paginated and other is Scrollable. Both have them allow sorting of records by clicking on any column header.

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

Let's suppose the table has 5000 records of 6 columns. When the user clicks on any of the column to sort, my understanding is that the whole 5000 records will get sorted and my table state will get updated.

• 在分页的情况下，由于我只渲染10 条记录/页，渲染速度会很快.
• 对于可滚动表，由于我要渲染整个 5000 条记录，所以渲染速度会很慢.

• In case of Pagination, since I am only rendering 10 records/ page, the rendering will be fast.
• In case of Scrollable table, since I am rendering the whole 5000 records, the rendering will be slow.

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

I have a project to make ahead and it may involve a huge records of data and column sorting is a mandatory feature. I want to validate whether my understanding of rendering speed for this use case is right or not?

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

What kind of optimizations are available in either cases for me to know?

跟进:-

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

Do I actually need react-window or react-virtualized if I am anyway going for Pagination of table?

推荐答案

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

You are correct in thinking that Paginated table will be faster with rendering than an enitre table rendered with 5000rows. Also an table with 5000rows is likely to cause your browser to slow down due to a large set of elements in the UI

但是，如果您使用虚拟化或窗口等概念，并且仅渲染视图中的数据量，则性能差异很小.这是更快和优化.

However there is very little performance difference if you use concepts like virtualization or windowing wherin you render only that amount of data as is coming in a view. This is much faster and optimized.

现在，如果您从 UX 的角度来看.与可滚动表相比，用户可能会找到列排序效率更高的分页表.

Now if you come to UX point of view. A user is likely to find a paginated table with column sorting much efficient as compared to a scrollable table.

有三个主要原因，因此我会使用按列排序的分页表

There are three main reasons because of which I would go with a paginated table with sorting on columns

• 当用户想要访问旧数据而不是一直向下滚动到它时，可以更轻松地跳转页面.这对我来说是最有力的理由之一
• 当您使用分页并且用户决定更改排序顺序时，如果您也决定，保持滚动可能会变得更加棘手.然而，分页顺利进行.要么保持在同一页面上，要么移动第一个.在任何一种情况下都很容易实现
• 如果您的数据增长，将所有数据保存在客户端可能会成为一种开销.在这种情况下，最好依赖 API 来获取数据.现在，随时随地获取数据的虚拟化有时会变得棘手，需要特别注意和预取细节

简而言之，由于大表的 UX 和实现原因，最好使用分页

In short its better to go with Pagination both because of UX and Implementation reason for a large table

这篇关于React 中的速度比较:用于列排序的分页表与可滚动表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！