如何分割大json接入反应

Question

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

假设我们已经获取url foo.com，我们也有从0到6之类的变量，或者我们放在那里的任何东西。我们有大约10,000个元素作为回应。

我需要所有这些行，因为我需要对它们进行排序。但这需要花费太多的时间把它们全部呈现在一起。

有什么好的练习。

1. 获取所有数据，客户端等待(目前正在使用)
2. 获取n项，直到所有已获取(更快的速度？)
3. 获取n项为止，显示已经获取的数据并在后台获取剩余值(在本例中，只有排序部分等待上次获取，但客户端可以在页面上查看)

。

Answer 1

在大多数情况下，一次获取10K项不是一个好主意。屏幕上也没有呈现10K项。诀窍是在UX中找到一个允许您不呈现/获取这许多项的甜蜜点。

你需要问问自己，在这个页面上，什么是用户最重要的事情。

• ，他们想看最上面最无聊的唱片吗？
• ，他们主要关心的是看和看这些东西吗？
• ，他们在寻找特定的物品吗？

如果无法更改api，请在服务器上为您进行排序，下面是我要做的工作：

1. 加载前100项，对其进行排序，然后在下一项获取的屏幕
2. 踢上呈现它们，并在第二页完全获取后向用户
3. 显示一条加载消息，对所有200项进行排序，然后在UI上显示“有新数据，单击此处查看”，但仍然只呈现前100项
4. 重复，直到您有了所有项，但给用户在任何时候取消

G 217的能力

这些好处是：

• √用户在第一页就会看到数据，您总是使用“显示更多”按钮来呈现100个项目，这样如果他们找到了

，那么DOM将是精益的

• √，随时可以取消。