在前端存储大量静态数据的方法答案

【问题标题】：Ways to store large set of static data in frontend在前端存储大量静态数据的方法
【发布时间】：2020-08-17 08:10:29
【问题描述】：

我需要在我的 react-app 中显示一些数据（主要是文本）。数据更像指南，不会经常更改。所以将它存储到数据库对我来说没有意义。有什么方法可以将它存储在前端？

我做了什么： 我正在考虑将这些数据放在一个降价文件中，获取这个异步，然后在渲染中将其转换为 JSON。（我使用this library）进行转换。

在不直接将所有信息直接放入代码的情况下，有没有其他方法可以做到这一点？我可以使用 JSON，但如果需要，它需要开发人员更改数据。即使数据不会因用户交互而改变，也应该为不了解 JSON/编码的人提供一项规定，以便以后更新数据。所以基本上我需要避免依赖开发人员进行数据更改。实现这一目标的推荐方法是什么？

【问题讨论】：

整个数据是单页显示还是有分页？数据是否有机会更新？
为什么不保留一个 json assets 文件夹，把它当成图像来对待呢？只是懒加载json文件？
JSON 很好，但我正在寻找一种解决方案，允许非开发人员在需要时更新内容。 PS：数据不会经常变化，但是不用编码就能更新的方式会更完美。

标签： reactjs markdown static-data

【解决方案1】：

首先，您可以将数据保存在 JSON 文件中，然后您可以从那里获取数据。

您不能使用 Localstorage，因为 Localstorage（通常）限制为 5mb 或更少的存储空间，所以如果您要存储的数据必须 > 5mb，那么本地存储不是一种选择。

但主要问题不是存储数据而是渲染大量数据。

通常，当您尝试遍历数据或更改基于数据的 DOM 时，您的性能会受到影响。

您一次需要这么多数据吗？分页列表或无限滚动等数据显示每次只取一部分数据。如果您不需要一次为列表中的所有数据渲染 DOM，请考虑对数据进行分页。

除此之外，如果 Pagination 不是选项，那么还有其他方法可以加载数据。

首先，您将看到渲染庞大数据集的问题。您可以使用浏览器开发者工具的元素面板检查页面。在 DOM 中找到数千个 div 节点应该不足为奇。

DOM 中的元素太多会导致两个问题：

初始渲染缓慢
延迟滚动

所以要解决这个问题，你可以使用 react-virtualized。

react-virtualized 是如何工作的？

虚拟渲染背后的主要思想是只渲染可见的东西。

应用中有很多数据，但它在任何时候只显示大约十个（适合屏幕的数据），直到您滚动显示更多。

因此，仅加载可见的元素并在不可见时将其卸载是有意义的，方法是用新元素替换它们。

您可以通过react-virtualized Github链接获得更多关于它的想法。

【讨论】：

【解决方案2】：

您可以使用本地存储 cookie 或 indexedDb for reference on client side storage

【讨论】：