我的页面的大部分内容基本上是40-100个组件的列表，每个组件包含大约11 KB数据（JSON格式）。问题在于，11倍的100乘以1.1 MB的内存，对于在较旧的移动设备上的浏览器来说，在Redux状态下存储似乎有点占用大量内存。它使我华丽的CSS动画看起来不连贯，并且按钮需要大约一秒钟的时间来切换开/关状态。
由于每个组件的高度恰好为148px，所以我的第一个想法是使用虚拟列表（Virtuoso），该列表一次只能渲染屏幕上可以容纳的尽可能多的项目（例如5-8个顶部）。这使第一次渲染的速度更快，但是却没有使动画更流畅，这无疑证实了主要是内存问题。
因此，如果我无法将所有数据存储并保留在状态对象中，那么我需要做一些类似于Virtuoso的事情，并且只保留渲染当前屏幕所需的数据。现在，我不确定Redux在内部如何工作，但是如果状态是不可变的，这是否意味着在那里进行的所有操作都保留在那里？那不是意味着我试图做一些不可能的事情，或者至少是反模式吗？
哦，更糟糕的是，数据将需要每3秒更新一次，这意味着某个组件有时会消失，而仅在下一次更新时重新出现。我还没有测试过这将如何影响Virtuoso滚动，但是我并不完全期望完美的即插即用行为。
我很欣赏有关如何使用redux及其（可能是）其中间件解决此问题的想法，因为它是我熟悉的唯一架构，并且自动切换到例如atm。 Flux意味着必须从头开始学习它，并重写约2000行redux代码。
答案 0 :(得分：0)
我从未使用过Virtuoso，react-virtualized或react-window，但这看起来像是您可以使用其中一个库解决的问题。
React应用程序的其他部分是否关心列表中呈现的数据？
另请参阅：https://blog.jakoblind.no/is-using-a-mix-of-redux-state-and-react-local-component-state-ok/