Angular - 实现trackBy有什么意义？

Question

从最近开始，当你没有在每个* ngFor上实现trackBy函数时，Angular styleguide-lint-extender“Codelyzer”会抛出警告。我想知道为什么这被认为是一个问题。

• 在这个blog中，实现trackBy的例子归结为trackByFn(index, item) { return index;} // or item.id。如果我从index切换到item.id，这将如何使我的应用程序更快？当涉及到数组插入或删除时，索引是最直接的事情。为什么[ngFor] -directive比较对象标识值呢？
• 在模块ng_for_of.d.ts我可以找到_trackByFn。所以我假设，return index-trackBy无论如何都是默认配置？那么为什么明确地实施它被认为是一种好的做法呢？

现在个人而言，我的应用程序中确实有一个大集合（数组），它位于redux商店中。它只能由空数组替换，或者可以添加新项，例如：

return {...state, myArray: [...state.myArray, ...newItems]}）

但从未移动或删除。用item.id而不是index跟踪我是否有意义？我应该在每个组件中使用* ngFor真正实现return index;函数吗？

Answer 1

*ngFor按对象标识跟踪项目，并尝试避免在为数组中的项目更新迭代数组时重新呈现元素，数组中的项目已在更新之前的位置。

如果数组包含原始值（字符串，布尔值，数字），则*ngFor在修改后无法识别它们。

一个*ngFor在一个字符串列表上

items = ['foo', 'bar', 'baz'];

<input *ngFor="let item of items" [(ngModel)]="item">

当在渲染的<input>中修改值时会导致疲劳行为，因为在每个键盘输入后，值将发生变化，并且*ngFor会松开跟踪之前渲染项目的位置，因此在更改之前删除值的输入并将其添加为值改变之后。这会导致输入失去焦点并导致输入改变位置。

要解决此问题，您可以指示*ngFor按索引而不是按身份进行跟踪。

也可以看看

• *ngFor Behaviour on primitive data type
• Angular2 NgFor inside tree model: wrong order when remove and then add elements

此外，对于对象，它可能很有用，例如，如果您希望*ngFor通过id属性跟踪项目。例如，如果使用了不可变值并且修改了列表中的项目，则这很有用 - 这意味着替换为id属性具有相同值的新对象实例，但更改了其他一些属性。通过*ngFor指示id跟踪不会导致项目被删除并重新添加到DOM。

*ngFor没有正确识别修改过的项目也会导致像这个Plunker example（来自How can I animate *ngFor in angular 2?）所示的动画中断（动画太频繁）。