角度-实施trackBy有什么意义？

Question

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

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

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

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

但从未移动或删除。我item.id代替它跟踪是否有意义index？我真的应该return index;在每个带有* ngFor的组件中实现-function吗？

Answer 1

*ngFor 通过对象标识跟踪项目，并在更新迭代数组时针对数组中的项目（在更新之前已在数组中的位置）尝试避免重新渲染元素。

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

一个*ngFor对像字符串列表

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

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

当在渲染中修改值时，将导致奇怪的行为，<input>因为在每次键盘输入后，该值都会更改，并且*ngFor会松散跟踪该项目之前的渲染位置，因此删除更改前的值输入，并在更改后的值中添加值更改。这会导致输入失去焦点，并可能导致输入改变位置。

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

也可以看看

对于对象，它也很有用，例如，如果您想*ngFor按id属性跟踪项目。例如，如果使用了不可变的值并且修改了列表中的一项，这将非常有用-这意味着用具有相同id属性值的新对象实例替换，但其他一些属性却被更改。指示*ngFor跟踪依据id不会导致该项目被删除并重新添加到DOM。

*ngFor不能正确识别已修改的项目也会导致此Plunker示例中所示的动画（来自如何在角度2中动画* ngFor？）中断（动画太多）。