如何在react中拆分大型json fetch

Question

有关于从 ReactJS 应用程序获取大型 json 数据的最佳实践的问题。

假设我们有 fetch url foo.com 并且我们还有 from、to 变量，例如 0 到 6 或我们放在那里的任何内容。我们在响应 json 中有大约 10 000 个元素。

我需要所有这些行，因为我需要对所有这些行进行排序。但将它们全部渲染在一起需要太多时间。

有什么好的做法吗？

1. 获取所有内容，客户端等待（目前使用）
2. 获取n个项目，直到全部获取（更快的速度？）
3. 获取n个项目，显示已获取的数据并在后台获取剩余值（在这种情况下，仅排序部分等待最后一次获取，但客户端可以在页面上查看）

Answer 1

在大多数情况下，

一次性获取 10K 项并不是一个好主意。两者都不 正在屏幕上渲染 10K 项目。诀窍是在用户体验中找到一个最佳点，让您无需渲染/获取这么多项目。

您需要问自己对于此页面上的用户来说最重要的事情是什么。

他们想看到最上面的
• blah记录吗？
他们最关心的是看到和观察这些物品吗？
他们正在寻找特定的物品吗？

如果您无法更改 API 在服务器上为您进行排序，那么我会这样做：

加载前 100 个项目，对它们进行排序，然后将它们呈现在屏幕上，
开始获取下 100 个项目并向用户显示加载消息，
第二页完全获取后，对所有 200 个进行排序，并在渲染之前在 UI 上指示“有新数据，点击此处查看”，但仍然只渲染前 100 个，
重复直到拥有所有项目，但让用户能够随时取消

好处是：

√ 第一页一出现，用户就能看到数据
√ 你总是使用“显示更多”按钮渲染 100 个项目，这样你的 DOM 就会变得精简
√ 如果他们找到了他们想要的东西，他们可以随时取消