在 React 应用程序中存储大量数据时，我应该更喜欢什么？答案

【问题标题】：What should I prefer when storing huge amount of data in React app?在 React 应用程序中存储大量数据时，我应该更喜欢什么？
【发布时间】：2018-10-30 18:20:01
【问题描述】：

我正在开发一个使用 ReactJS 作为前端的产品。我正在以列表的形式获取大量数据（以数千为单位），关于我想在本地存储的 API 响应。那么在这种情况下我应该更喜欢LocalStorage 还是Redux？

我很困惑，因为数据量非常大，我认为将其存储在 redux-store 上可能会导致一些性能问题。

【问题讨论】：

除了存储数据，你还用它做什么？
localStorage 有存储限制。尽管真的，您根本不应该在客户端存储大量数据。在服务器端处理大量数据，只将结果或重要部分发送到客户端。如果您正在谈论一个庞大的数据列表（例如来自某种搜索的数千个结果），那么您应该有一个分页设置，在客户端的任何时候都只加载其中的一小部分。
@Jayce444 关于 localStorage 是正确的，它有内存限制，具体取决于浏览器。如果你处理非常大的项目，例如使用 redux 或 mobx。

标签： html reactjs redux react-redux local-storage

【解决方案1】：

Localstorage（通常）限于5mb or less 的存储空间，因此如果您要存储的数据序列化为 > 5mb，那么 localstorage 不是一个选项。

通常，当您尝试迭代数据或基于数据更改 DOM 时，您的性能会受到影响。一般来说，我认为您正在寻找错误问题的答案。

相反，考虑向用户显示大量数据的最佳方式是什么？

如果答案是分页，那么您已经解决了数据问题，因为您可以按视图加载调用。与无限滚动相同。如果需要优化后端负载，可以添加后端缓存层等。

【讨论】：

我在看，我应该在哪里存储数据，如果我将在 redux-store 中存储大量数据，那么系统性能有什么问题吗？
我同意这个答案。您需要询问数千行数据的用例是什么。需要一次性全部取走吗？如果是，那为什么？如果有多个api，结果累积到数千行数据，那么你的问题是如何优化api调用。
如果我在 redux-store 中存储数千个数据，系统中是否存在任何性能问题（如内存、CPU 等）？我知道如何在视图页面上处理它。如果我在 redux 存储中存储一千行数据，我只想知道任何问题。

【解决方案2】：

就我个人而言，我认为列表中的数千个项目不会对 Redux 存储造成太大的性能问题。相反，当使用 redux 存储大列表时，请考虑以下问题：

您真的需要一次性获取这么多数据吗？常见的列表显示，如分页列表或无限滚动，每次只取一部分数据。如果您不需要一次为列表中的所有数据渲染 DOM，请考虑在后端对数据进行分页，并将列表中的确切数据量发送到前端以显示。
您如何存储您的列表？ Redux recommends data normalization，为了提高性能。如果应用频繁查询和显示列表，则数组是您要存储列表的最后一个结构。
如何从 redux 存储中取出列表以进行 DOM 渲染？如果您需要经常更新列表中的项目，这一点至关重要。 Here is an excellent solution 分解了您可以采取哪些措施来处理这种情况。

【讨论】：

如果我在 redux-store 中存储数千个数据，系统中是否存在任何性能问题（如内存、CPU 等）？我知道如何在视图页面上处理它。如果我在 redux 存储中存储一千行数据，我只想知道任何问题。
@GAJESHPANIGRAHI redux store 也有数据限制。如果超过限制，它将内存不足。