reactjs - 在前端存储大量静态数据的方法
问题描述
我需要在我的 react-app 中显示一些数据（主要是文本）。数据更像指南，不会经常更改。所以将它存储到数据库对我来说没有意义。有什么方法可以将其存储在前端？
我做了什么： 我正在考虑将这些数据放在一个降价文件中，获取这个异步，然后在渲染中将其转换为 JSON。（我正在使用这个库）进行转换。
有没有其他方法可以在不直接将所有信息直接放入代码的情况下做到这一点？我可以使用 JSON，但如果需要，它需要开发人员更改数据。即使数据不会因用户交互而改变，也应该为不了解 JSON/编码的人提供一个可以稍后更新数据的条款。所以基本上我需要避免依赖开发人员进行数据更改。实现这一目标的推荐方法是什么？
解决方案
首先，您可以将数据保存在JSON文件中，然后您可以从那里获取数据。
您不能使用Localstorage，因为Localstorage（通常）限制为 5mb 或更少的存储空间，所以如果您要存储的数据必须 > 5mb，那么 Localstorage 不是一个选项。
但主要问题不是存储数据，而是渲染大量数据。
通常，当您尝试迭代数据或基于它更改 DOM 时，您的性能会受到影响。
您一次需要那么多数据吗？分页列表或无限滚动等数据显示每次只取一部分数据。如果您不需要一次为列表中的所有数据呈现 DOM，请考虑对数据进行分页。
最重要的是，如果分页不是选项，那么还有其他方法可以加载数据。
首先，您将看到渲染庞大数据集的问题。您可以使用浏览器开发者工具的元素面板检查页面。在 DOM 中找到数千个 div 节点应该不足为奇。
DOM 中如此多的元素会导致两个问题：
- 初始渲染缓慢
- 延迟滚动
所以要解决这个问题，你可以使用react-virtualized。
反应虚拟化如何工作？
虚拟渲染背后的主要思想是只渲染可见的东西。
应用程序中有很多数据，但它在任何时候只显示大约十个（适合屏幕的数据），直到您滚动显示更多。
因此，仅加载可见的元素并在不可见时将其卸载是有意义的，方法是用新元素替换它们。
你可以通过react-virtualized Github链接获得更多关于它的想法。