javascript - Angular 2 - trackBy 函数，它到底有什么作用？

Question

我的印象是 trackBy 函数仅在尝试优化 *ngFor 的性能时使用，因此如果发生变化，DOM 不会待重建。

但是，最近，我遇到了一种情况，trackBy 实际上修复了错误的行为。

以此为例:https://plnkr.co/edit/nRgdwoiKAMpsbmWaoMoj?p=preview重点关注爱好部分，尤其是 HTML:

<div>
  <h2>Hobbies</h2>
  <div *ngFor="let h of user.hobbies; trackBy:customTrackBy; let i = index">
    #{{i}} - {{h | json}}<br />

    <input [(ngModel)]="h.name" name="hobby_name_{{i}}" /> <br /><br />

    <select [(ngModel)]="h.type_id" name="type_{{i}}">
      <option *ngFor="let t of types" [value]="t.id">{{t.type}}</option>
    </select>

    <br />
    <br />
    <button class="btn btn-warn" (click)="remove(i)">Remove</button>
    <br /><br />
  </div>
</div>

我必须在第一个 *ngFor 中显式定义这部分:trackBy:customTrackBy。如果删除 trackBy，则执行以下步骤:

1. 删除第一项
2. 添加新项目

在这种情况下，第一个项目的输入将替换为第二个项目的内容(两个字段具有相同的内容)，但是模型中的值是正确的。

trackBy 解决了这个问题，但是为什么呢？

我真的很感激任何形式的解释。如果这不是提出此类问题的正确位置，请将我重定向到正确的位置。谢谢。

更新

以下是错误行为的示例:https://plnkr.co/edit/u8YajKfHcPiVqY0WcJt7?p=preview删除第一个项目(循环)并添加一个新项目(添加按钮)，然后查看两个值如何获得相同的默认值(即使模型保持正确，BF 也会被“默认值”替换)。

Answer 1

*ngFor 默认情况下按对象标识跟踪项目。

如果您有原始值(例如字符串数组)，并在

中使用它们

<div *ngFor="let item of items; let i=index">
  <input [(ngModel)]="item" name="item{{i}}">
</div>

并且您编辑了一项，那么 *ngFor 就会遇到麻烦，因为编辑的项的标识已更改。

使用ngForTrackBy，您可以告诉*ngFor按索引跟踪项目，然后上面的代码在您编辑字段时可以正常工作。

另一个用例是当您希望 *ngFor 通过某些自定义对象 ID 属性而不是对象标识来跟踪项目时。