使用React和Redux处理数据密集型请求的最佳方法是什么？
我页面的大部分内容本质上是一个由40-100个ish组件组成的列表，每个组件包含大约11 KB的数据(以JSON格式)。问题是，100乘以11 KB的容量为1.1MB，这似乎有点太占用内存，无法存储在旧移动设备上的浏览器的Redux状态中。它使我华丽的CSS动画看起来波涛汹涌，按钮需要大约一秒的时间来切换/关闭状态。
因为每个组件的高度都是148 at，所以我的第一个想法是使用一个虚拟列表(Virtuoso)，它一次只呈现尽可能多的项目(就像5-8顶)。这使得第一次渲染速度更快，但并没有使动画变得更流畅，这肯定证实了这主要是内存问题。
因此，如果不能将所有数据存储并保存在state对象中，则需要执行类似Virtuoso的操作，并且只保留当前屏幕所需的数据。现在，我不太清楚Redux在内部是如何工作的，但是如果状态是不可变的，这不意味着过去的一切都在那里吗？这不意味着我在尝试做一些不可能的事情，或者至少是反模式？
哦，更糟糕的是，数据需要每3秒更新一次，这意味着组件有时会消失，只会在下一次更新时再次出现。我还没有测试这将如何影响Virtuoso滚动，但我并不完全期望完美的即插即用行为。
我很想知道如何用redux和(可能的)中间件来解决这个问题，因为它是我唯一熟悉的atm体系结构，切换到Flux将意味着必须从头开始学习它并重写大约2000行redux代码。
回答 1
Stack Overflow用户
发布于 2019-12-04 17:09:24
我从未使用过Virtuoso、react虚拟化或react窗口，但这似乎是一个您可以使用其中一个库解决的问题。
您的应用程序的其他部分是否关心您正在列表中呈现的数据？
如果没有，则将数据放在该组件的本地状态，而不是在Redux中。如果存在，可以尝试在组件挂载时在localStorage中设置这个庞大的列表，在组件卸载时将其取消，并使用组件的本地状态选择开始/结束索引来选择数据的一部分。
另见：https://blog.jakoblind.no/is-using-a-mix-of-redux-state-and-react-local-component-state-ok/
https://stackoverflow.com/questions/59179687
复制相似问题
腾讯云开发者
