对于使用 ngrx 以状态存储的数组来说有多大？答案

【问题标题】：How big is too big for an array stored in state with ngrx?对于使用 ngrx 以状态存储的数组来说有多大？
【发布时间】：2019-05-29 13:36:26
【问题描述】：

我有一个包含大约 4000 到 5000 个对象的数组，我需要在我的 Angular 应用程序的整个生命周期中使用它们。我在这个应用程序中使用 ngrx 进行状态管理，并使用 startWith 运算符的效果加载这些数据。我想知道对于以这种方式加载和存储状态的对象数组来说太大了。

【问题讨论】：

【解决方案1】：

这实际上取决于您的阵列中有什么，以及您打算用它做什么。在对您的应用产生任何影响之前，数组本身可以包含很多值。

但是，如果您有一个包含大量值的数组，我的建议是：

不要一次显示所有项目，使用分页或无限滚动解决方案，您可以在那里找到（例如 Material CDK 中的通用解决方案！）。这将是您可能遇到的最大问题之一：在视图中显示过多
如果您知道必须在数组中进行搜索，请尝试在收到数组后立即为您的搜索建立索引，而不是每次搜索更改时。例如，如果您有一组用户，并且您知道您的 UI 有“仅显示 +18 岁的人”，那么您可以创建一个包含所有这些人的Set（仅对他们的引用）
保持您的数据不可变并使用基本的 Angular 功能：trackBy 与您的 *ngFor 以及 changeDetectionStrategy: ChangeDetectionStrategy.OnPush` 一起使用。

我已经尝试查看一个应用是否可以处理 10 万个项目，答案是肯定的，尽管有时它开始感觉有点反应迟钝。因此，根据上述信息，4 或 5k 应该都很好。

【讨论】：

【解决方案2】：

您可以尝试使用 stackblitz.com（或类似的）创建一个简单的测试，并查看 Ngrx 商店中的 5000 个项目对性能的影响。

你可以用

模拟一个大数组

Array.from(
  new Array(5000),
  (c, i) => ({ test: `This is test object #${i}` })
)

【讨论】：