NgForOf 指令中 ngForTrackBy 的目的是什么

Question

来自Angular的source code，下面的sn-p让我很困惑。

 /**
   * A function that defines how to track changes for items in the iterable.
   *
   * When items are added, moved, or removed in the iterable,
   * the directive must re-render the appropriate DOM nodes.
   * To minimize churn in the DOM, only nodes that have changed
   * are re-rendered.
   *
   * By default, the change detector assumes that
   * the object instance identifies the node in the iterable.
   * When this function is supplied, the directive uses
   * the result of calling this function to identify the item node,
   * rather than the identity of the object itself.
   *
   * The function receives two inputs,
   * the iteration index and the node object ID.
   */
  @Input()
  set ngForTrackBy(fn: TrackByFunction<T>) {
    ...
      }
    }
    this._trackByFn = fn;
  }

还有here 来自官方文档的一个示例，其中传递了trackBy 函数。

trackById(index: number, hero: Hero): number { return hero.id; }

源码说明

当提供此函数时，指令使用调用此函数的结果来标识项目节点，而不是对象本身的标识。

但是在上面的例子中，我们无论如何都传递了对象本身的身份（return hero.id;），但是通过一个附加函数。为什么我们需要那个？如果我们不传递任何这样的函数，Angular 不会按照文档默认执行它所做的事情，即获取对象本身的身份吗？

跟踪器函数的显式传递与 Angular 通常没有它时所做的有什么不同？

谢谢。

Answer 1

我绝对可以看出它的措辞是多么令人困惑。但是当它说“而不是对象本身的身份”时，

Answer 2

Angular 会检查内存中的非原始类型的引用。如果不传入trackById 方法，每次数组更改时，它都会认为每个对象都是新对象并重新创建所有DOM 节点。

如果传递trackById，它将检查原始对象与新对象，如果它们的id属性相同，则表示它们是相同的对象，不会重新绘制该DOM节点.

这是一个您也可以运行的示例，它只是普通的 javascript

let obj1 = {id: 1, name: 'test'};
let obj1a = {id: 1, name: 'test'};
let prim1 = 1;
let prim2 = 1;

const checkById = (a, b) => {
  return a.id === b.id;
}

// obj1 and 1a are not the same, because they are different references in memory
console.log("obj1 === obj1a", obj1 === obj1a);

// ob1 and obj1a are the "same" to us though, because the ID property is the same
console.log("checkById(obj1, obj1a)", checkById(obj1, obj1a));

// primitives would be equal
console.log("prim1 === prim2", prim1 === prim2);