在React应用中存储大量数据时，我应该首选什么？

Question

我在一个产品上工作，在这个产品中我使用ReactJS作为前端。我在API响应上以列表的形式获得了大量的数据(以数千为单位)，我希望将这些数据存储在本地。那么，在这种情况下，我应该选择LocalStorage还是Redux

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

Answer 1

本地存储(通常)受限于存储空间的5mb or less，所以如果您存储的数据序列化到> 5mb，那么本地存储就不是一个选项。

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

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

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

Answer 2

就我个人而言，我不认为一个列表中的数千个项目会给Redux商店带来太多的性能问题。相反，在使用redux存储大列表时，请考虑以下问题：

1. ，你真的一下子需要这么多数据吗？常用列表显示，例如分页列表或无限滚动，每次只获取一部分数据。如果你不需要一次为列表中的所有数据呈现DOM，可以考虑在后台对数据进行分页，并将列表中准确的数据量发送到前端显示。
2. 如何存储列表？Redux recommends data normalization，以提高性能。数组是您想要存储列表的最后一个结构，如果应用程序查询并显示列表frequently.
3. How，您是否从redux store中取出列表以进行DOM渲染？如果您需要频繁更新list中的项目，这一点至关重要。Here is an excellent solution，它分析了您可以做些什么来处理这种情况。