在React应用程序中处理大JSON文件的困境和策略

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

所以我构建应用程序主要是为了学习 React 的目的。 该应用程序是关于汽车制造商的。所以我开始构建包含所有品牌、信息和型号的 JSON 文件(我将其保存在本地)。我很快意识到 JSON 文件会变得很大。 目前大约是 3MB,当我完成时它可能是 150MB 或更大。

现在我了解到有一个像 React Query 这样的工具,我可以在其中针对特定页面(例如,如果您在应用程序上转到丰田品牌),仅获取仅适用于丰田的大 JSON 的特定部分(即使不知道如何它在幕后工作,因为你对整个文件发出了获取请求,但主要的是它可以完成这项工作,“保存”用户而不是获取整个 JSON)。

好吧,这个工具可以帮助我,因为对于最终用户来说,如果他进入丰田页面,就不需要从 json 中获取所有数据,只是为了查看丰田信息。

我的困境是我应该将所有信息保留在一个 JSON 文件中,还是应该尽可能地将其拆分,并对每个不同品牌的不同端点执行不同的获取请求?(这似乎需要更多工作)

绝对不好的做法是用这个数据库制作服务器(朋友会帮助我,他正在谈论sql lite或类似的东西),但再次不知道正如我上面解释的那样,什么对于一个文件或多个文件中的数据来说是最好的.

我最感兴趣的是最终用户拥有流畅的体验。

我需要更多有经验的人关于这个话题的建议和建议。

谢谢你。

目前 JSON 文件很小(30 000 行),所以即使当我执行 fetch 请求时,我的计算机和浏览器也能很好地处理它,但我在想当它变得比这大 50 倍时它会如何表现。

reactjs json database performance fetch-api
1个回答
0
投票

理想情况下,您只想获取能够正确显示页面所需的数据。任何您不使用的数据都不应被获取。

在生产应用程序中,理想情况下您应该有一个后端来查询数据库,然后仅使用您需要的数据生成 JSON 响应。如果不设置实际的后端来处理此逻辑,这是不可能的。

如果您确实想使用自己的数据,最好的选择可能是根据页面的需求将 JSON 简单地拆分为不同的文件。或者,您可以使用 MongoDB 之类的东西设置本地数据库,但是如果您只是学习 React 并且不需要高度动态的数据库/界面,这可能有点过大了。

如果您只是想学习 React,我个人的建议是使用免费的在线 API 来为您提供数据。您将无法准确选择它们提供的数据,但您将拥有一个功能齐全的后端,以便您可以专注于学习 React,而不是学习数据建模和后端工程。

快速谷歌搜索可能会找到大量结果。这是我找到的一个简单的,但它很小(总共 30 辆车):https://freetestapi.com/apis/cars

© www.soinside.com 2019 - 2024. All rights reserved.