如何在react中拆分大型json fetch

问题描述 投票:0回答:1

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

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

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

有什么好的做法吗?

  1. 获取所有内容,客户端等待(目前使用)
  2. 获取n个项目,直到全部获取(更快的速度?)
  3. 获取n个项目,显示已获取的数据并在后台获取剩余值(在这种情况下,仅排序部分等待最后一次获取,但客户端可以在页面上查看)
json reactjs performance fetch
1个回答
1
投票
在大多数情况下,

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

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

    他们想看到最上面的
  • blah记录吗?
  • 他们最关心的是看到和观察这些物品吗?
  • 他们正在寻找特定的物品吗?
如果您无法更改 API 在服务器上为您进行排序,那么我会这样做:

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

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