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

Vis*_*hnu 5 markdown static-data reactjs

我需要在我的反应应用程序中显示一些数据(主要是文本)。数据更像是指南,不会经常更改。因此,将其存储到数据库对我来说没有意义。有哪些方法可以将其存储在前端?

我做了什么: 我正在考虑将此数据放入 markdown 文件中,获取此异步数据,然后在渲染时将其转换为 JSON。(我正在使用这个库)进行转换。

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

小智 3

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

\n

您不能使用本地存储,因为本地存储(通常)限制为 5mb 或更少的存储空间,因此如果您要存储的数据必须大于 5mb,则 Localstorage 不是一个选项。

\n

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

\n

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

\n

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

\n

最重要的是,如果分页不是选项,那么还有其他方法来加载数据。

\n

首先,您\xe2\x80\x99将看到渲染巨大数据集的问题。您可以使用浏览器\xe2\x80\x99s 开发人员工具的元素面板检查页面。在 DOM 中发现数千个 div 节点应该不足为奇。

\n

DOM 中如此多的元素可能会导致两个问题:

\n
    \n
  1. 初始渲染速度慢
  2. \n
  3. 滚动缓慢
  4. \n
\n

因此,要解决这个问题,您可以使用react-virtualized

\n

反应虚拟化如何工作?

\n

虚拟渲染背后的主要思想是仅渲染可见的内容。

\n

应用程序中有很多数据,但它在任何时候都只显示大约十个(适合屏幕的数据),直到您滚动显示更多数据。

\n

因此,仅加载可见元素并在不可见时通过用新元素替换它们来卸载它们是有意义的。

\n

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

\n