角度跟踪通过返回索引

Question

我有一个很大的ngFor，经常使用异步数据进行更改。TrackBy只允许刷新更改的部分，添加后我真的感到与众不同。例如，在我看来，使用trackBy返回唯一ID有什么好处。但是我有时会看到样本返回当前索引。

public trackByFn(index, item) { return index }

在我的表格中，如果我直接返回“ index”或“ item.id”，则不会发现任何差异。两者似乎都优化了渲染（但是我可能没有发现一些错误的边框情况）。

因此，有人可以解释一下返回索引时到底发生了什么吗？

Answer 1

根据您的评论和我自己的好奇心，我研究了角度不同的代码。我可以为您分解三种情况下发生的情况，我想也很高兴知道：

第一种情况：

没有trackBy定义：<div *ngFor="let obj of arrayOfObj">{{obj.key}}</div>

如果trackBy未定义，则对数组进行角度迭代，创建DOM元素，并将数据绑定到模板中[ngForOf]。（以上代码可以写成）：

<ng-template ngFor let-obj [ngForOf]="arrayOfObj">
  <div>{{obj.key}}</div>
</ng-template>

因此，基本上，它将创建所有这些div元素。最初，所有3种可能性都是相同的。现在，来自API的新数据或多或少都是相同的数据，但是对数组对象的引用发生了变化，并且初始数组中对象的所有引用都不同。如果您未定义trackBy函数，则角度将通过identity比较===。这将与字符串，数字和其他原语（不是那么多）配合得很好。但是对于对象，这不会。因此，如果它开始检查是否有更改，现在会发生什么。它再也找不到原始对象，因此它删除了DOM元素（如果对象决定返回，则将其实际存储在以后使用），并从头开始构建所有模板。

即使数据没有更改，第二个响应也会生成具有不同标识的对象，并且Angular必须拆除整个DOM并重新构建它（就像删除了所有旧元素并插入了所有新元素一样）。

您可以想象这可能会使CPU感到非常饿，而内存也很饿。

第二种情况：

trackBy 用对象键定义：

<div *ngFor="let obj of arrayOfObj;trackBy:trackByKey">{{obj.key}}</div>

trackByKey = (index: number, obj: object): string => {
  return object.key;
};

让我们先做一个。这是最快的。因此，我们正处于新数据进入的时刻，具有与以前不同身份的对象。此时，角度迭代此trackBy函数上的所有新对象，并获得对象的标识。然后，它将交叉引用到现有（如果找不到则先前删除）的DOM元素。如果找到，它将仍然更新模板内进行的所有绑定。如果找不到，它将检查以前删除的对象，如果仍然找不到它，它将从模板创建一个新的DOM元素并更新绑定。因此，这很快。只需查找已经创建的DOM元素，并更新绑定，即可以快速完成快速绑定。

第三种情况：

trackBy 用数组索引定义

<div *ngFor="let obj of arrayOfObj;trackBy:trackByIndex">{{obj.key}}</div>

trackByIndex = (index: number): number => {
  return index;
};

这与trackBy对象键是相同的故事，但是差别很小，如果您去玩弄数组中的元素，则模板中的绑定会不断更新。但这仍然是快速的，但很可能不是最快的方法:)，尽管它比重新创建整个DOM快得多。

希望你现在有所作为。不过有些额外的东西。如果您有很多业务对象，它们都具有相同的访问其身份的方式，例如属性.id或.key，则可以扩展本机*ngFor并创建自己的结构化指令，该指令trackBy内置了此功能。

export interface BaseBo {
  key: string;
}

@Directive({selector: '[boFor][boForOf]'})
export class ForOfDirective<T extends BaseBo> extends NgForOf<T> {
  @Input()
  set boForOf(boForOf: T[]) {
    this.ngForOf = boForOf;
  }

  ngForTrackBy = (index: number, obj: T) => obj.key;
}