状态数据变大了怎么办?

What should I do when the state data become to large?

这是我的:

state.groupTypes.list=[];

当我调用 api 并将其保存到状态树时,列表将包含项目 state.groupTypes.list

//with paging and 10 item per page
getList(params)

我怕当state.groupType.list有超过千条记录时它会耗尽设备的所有内存所以我找到了一个解决方案:状态应该只保存最多100条记录。所以当它到达第 10 页时,状态将删除前 10 条记录并推送来自 api 的新记录。 有什么解决这个问题的建议吗?我的解决方案可行吗?

你应该制作一个支持分页的 API 假设你想在你的应用程序中实现无限滚动,你向服务器发送一个请求,例如“https://www.example.com/list/page1” 并响应您将收到一个包含 5 个项目的数组,当用户滚动到列表底部时,您再次向服务器“https://www.example.com/list/page2

发送请求

全部

对象内容的大小与将其存储在状态中无关紧要。该对象未被复制,而是被引用。

但如果人员不受组件管理,那么它就不是组件状态的一部分,因此状态不在它应该在的位置。该组件应该只关闭该数据的导入,或者使用表示该数据的上下文,或者在 props 中接收它,等等。

在 React 状态下拥有大量数据非常好。您可以在那里存储的内容并没有真正的限制,并且 React 状态本身不会对其可以存储的大小施加任何类型的限制。

大型数据集的问题出现在呈现此类数据时。例如,如果您有一个 table 需要呈现数千行,它会降低浏览器的速度。虽然我们谈论的是数千个条目,但数百个根本不成问题。

如果您发现自己必须渲染数千个数据点,您可以使用 components/libraries 来帮助解决这个问题,例如 React Virtualized,它只会渲染所需的元素,而不是所有元素。

如您所见,问题不在于存储什么,而在于呈现什么。我的建议是在您注意到性能问题之前不要担心您正在渲染的内容,一旦您达到该点,您将需要开始优化。

除非您确定自己会遇到性能问题,否则从一开始就进行优化可能会让您浪费时间,最好把时间花在其他地方。