Angular - 实现 trackBy 的意义何在？

Question

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

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

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

返回 {...state, myArray: [...state.myArray, ...newItems]}),

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

Answer 1

*ngFor通过对象标识跟踪项目，并在更新迭代数组时尝试避免重新呈现元素

如果数组包含原始值(字符串、 bool 值、数字)，则 *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 跟踪项目属性(property)。这很有用，例如，如果使用不可变值并且列表中的一个项目被修改 - 这意味着替换为具有与 id 相同值的新对象实例。属性，但其他一些属性发生了变化。指导*ngFor通过 id 追踪不会导致项目被删除并重新添加到 DOM。

*ngFor没有正确识别修改过的项目也会导致动画，如本 Plunker example 所示。 (来自 How can I animate *ngFor in angular 2? )中断(动画过于频繁)。