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

debugcn 发表于 Dev

拉克夏·塔库尔（Lakshya Thakur）

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

假设该表具有6列的5000条记录。当用户单击任一列进行排序时，我的理解是将对全部5000条记录进行排序，并且我的表状态将得到更新。

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

我知道在两种情况下都可以使用哪种优化？

跟进：-

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

Shubham Khatri

您的想法是正确的，认为分页表的渲染速度比5000行的enitre表快。此外，由于用户界面中包含大量元素，具有5000行的表可能会导致浏览器速度降低

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

现在，如果您谈到UX的观点。与滚动表相比，用户可能会发现具有列排序功能的分页表。

还有three main reasons，因为其中的我会去与分页表的列排序

用户在要访问旧数据时可以轻松跳转页面，而不必一直滚动到旧页面。这是我最有力的理由之一
当您使用分页并且用户决定更改排序顺序时，如果您也决定保持滚动可能会变得更加棘手。但是分页与此同时进行得很顺利。您可以停留在同一页面上，也可以移动第一页。无论哪种情况，都易于实现
如果您的数据增长，则将所有数据保留在客户端可能会增加开销。在这种情况下，最好依靠API来获取数据。现在，在旅途中获取数据的虚拟化有时会变得棘手，并且在预取时需要特别注意和细节

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。