Javascript 使用React和Redux处理数据密集型请求的最佳方法是什么？

我的页面主要是一个40-100~ish组件的列表，每个组件包含大约11KB的数据（JSON格式）。问题在于，100乘以11KB等于1.1MB，对于旧移动设备上的浏览器来说，在Redux状态下存储内存似乎有点过于密集。它使我华丽的CSS动画看起来波涛汹涌，按钮需要大约一秒钟来切换开/关状态

因为每个组件的高度都是148px，所以我的第一个想法是使用一个虚拟列表（Virtuoso），它一次只能在屏幕上显示尽可能多的项目（类似于5-8个顶部）。这使得第一次渲染速度更快，但没有使动画更平滑，这肯定证实了这主要是内存问题

因此，如果我不能在state对象中存储和保留所有数据，那么我需要做一些类似于Virtuoso的事情，只保留渲染当前屏幕所需的数据。现在，我不确定Redux在内部是如何工作的，但是如果状态是不变的，那不意味着所有的东西都会留在那里吗？这难道不意味着我在尝试做一些不可能的事情，或者至少是反模式的吗

哦，更糟糕的是，数据需要每3秒钟更新一次，这意味着某个组件有时会消失，但在下次更新时会重新出现。我还没有测试过这将如何影响Virtuoso滚动，但我并不期待完美的即插即用行为

---

我很想知道如何用redux和（可能）它的中间件来解决这个问题，因为它是我唯一熟悉的atm架构，转换到Flux意味着必须从头开始学习，重写大约2000行redux代码。

我从未使用过Virtuoso、react virtualized或react window，但这似乎是一个可以通过这些库之一解决的问题

React应用程序的其他部分是否关心列表中呈现的数据

• 如果不是，则将数据置于该组件的本地状态，而不是Redux
• 如果他们这样做了，可能会在组件挂载时尝试在localStorage中设置这个巨大的列表，在卸载时取消设置它，并使用组件的本地状态选择开始/结束索引以拾取数据片段

---

另请参见：

Immutable只是意味着您不能（不应该）改变当前对象，但减缩器会将其保存在那里以构建新状态，只要旧状态不变，它就可以使用旧状态的浅拷贝。因此，您可以创建一个新数组，并添加到其中

{…state，yourList:[…state.yourList，…newListItems]}

理想情况下，您应该提供当前正在使用的流程的详细信息，以便有人可以指出您可以改进它的地方。但即使如此，在安装每个组件时，您是否可以获取其数据，这可能会更好？这可能是一个使用redux thunk的好地方，因为您可以定义调用api并随响应发送更新的操作。@Brian这有点棘手，因为当前组件在用户滚动通过后会卸载。理论上我可以，但我觉得这会导致太多不必要的请求，除非我放弃虚拟列表，改用无休止的滚动。这最终会导致我现在面临的问题，即如何在内存中存储100个活动组件。@EmileBergeron我正试图找出如何显示一个示例，但如果不使用我的API和制作相同的动画密集型布局，它实际上无法达到我所遇到的问题的规模。除非我链接到我的实际项目页面，这是一种专有信息：[谢谢！是的，不幸的是，整个页面都以数据为中心。我没有想到

localStorage

，这是一个值得一试的好主意。再次感谢您的时间：）