什么是阵列性能的最佳选择？

Question

我有一个显示列表的组件。从一个可观察的角度，我可以收到添​​加的项或新的数组。在性能方面最好的是什么？

myArray=[];
$myArray.subsscribe(d=>this.myArray=d)

myArray=[];
$myArrayJustNewItem.subsscribe(d=>this.myArray.push(d))

<span *ngFor='item of myArray'>{{item}}</span>

我了解的是什么解决方案，视图将被完全重新渲染？还是应该使用索引？

Answer 1

有两个地方可能以不同的方式使用

1. 您不必.subscribe()，您可以始终使用async pipe。在这种情况下，您避免创建新变量并直接预订Observable，这显然是更好的解决方案。

   myArray$: Observable<any[]>; // or any other type
   
   <div *ngFor="let item of (myArray$ | async)">{{ item }}</div>
   

2. 如果要将新项目添加到在*ngFor内部呈现的现有数组中，则应执行以下操作：（实际上是创建具有相同或更新内容的新Array实例）。 br /> 将新项目推送到现有阵列，可能应该在服务甚至服务器端完成，因此您的组件始终会获得一个新的阵列实例，而无需手动添加它，因此重新渲染仅在新建时发生数据变为“可观察”。

   myArray: Array<any> = [1,2,3,4];
   
   addItemToArray(item: number): void {
      this.myArray = [...this.myArray, item];
   }
   
   
   <div *ngFor="let item of myArray">{{ item }}</div>
   

更新：添加了有关性能角度的描述和建议