当状态数据变得很大时，我应该怎么办？

Question

我的情况是这样的。

state.groupTypes.list=[];

当我调用api并将其保存到状态树中时，列表中就会有条目。 state.groupTypes.list。

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

我担心当state.groupType.list有超过几千条记录时，会占用设备的所有内存，所以我找到了一个解决方案：状态最多只能保存100条记录，所以当它来到第10页时，状态会删除前10条记录，并推送从api获得的新记录。所以当它来到第10页时，状态将删除前10条记录，并推送从api获得的新记录。有什么建议可以解决这个问题，我的解决方案是否可行？

Answer 1

对象内容的大小对存储在状态中并不重要。对象不是复制的，而是引用的。

但是如果人不被组件管理，那么它就不是组件状态的一部分，所以状态不在它应该在的地方。组件应该只是在导入该数据的时候关闭，或者使用代表该数据的上下文，或者在道具中接收该数据等等。

在React状态下有大数据是完全可以的。你可以在那里存储什么并没有真正的限制，而且React状态本身并没有对它可以存储的大小进行任何类型的限制。

大数据集的问题出现在渲染这种数据上。例如，如果你有一个需要渲染数千行的表，就会让浏览器速度变慢。不过我们说的是几千条，几百条应该完全不是问题。

如果你发现自己需要渲染成千上万的数据点，你可以使用组件库（componentlibraries）来帮助解决这个问题，比如React Virtualized，它只会渲染需要的元素，而不是所有的元素。

正如你所看到的，问题不在于你存储什么，而在于你渲染什么。我的建议是，在你注意到性能问题之前，不要担心你正在渲染的内容，一旦你达到这个点，你就需要开始优化。

除非你确定你会有性能问题，否则从一开始就优化会让你失去更好地花在其他地方的时间。

Answer 2

你应该制作一个支持分页的API，假设你想在你的应用中实现无限滚动，你向服务器发送一个请求，比如说："https:/www.example.comlistpage1"并响应你将收到一个包含5个项目的数组，当用户滚动到列表底部时，你再向服务器发送一个请求"https:/www.example.comlistpage2"

全是