文章内容

2019/7/6 17:15:14,作 者: 黄兵

Angular 2 - 使用trackBy提高性能

问题:

当您需要迭代Angular 2中的集合时,您可能会使用ngFor指令,指令将从集合中的每个项目实例化一次模板。

<ul>
<li *ngFor="let item of collection;">{{item.id}}</li>
</ul>

如果我们在某些时候需要更改集合中的数据,例如由于API请求,我们就会遇到问题,因为Angular无法跟踪集合中的项目,也不知道哪些项目已被删除或添加。

因此,Angular需要删除与数据关联的所有DOM元素并再次创建它们。这意味着很多DOM操作,特别是在集合的情况下,并且正如我们所知,DOM操作是昂贵的。

注意:当我说“更改数据”时,我指的是用新对象替换集合而不保留相同的引用。

让我们看看这个行动:


解决方案:

我们可以通过提供trackBy功能帮助Angular跟踪添加或删除的项目trackBy函数将索引和当前项作为参数,并需要返回此项的唯一标识符。

@Component({
selector: 'my-app',
template: `
<ul>
<li *ngFor="let item of collection;trackBy: trackByFn">{{item.id}}</li>
</ul>
<button (click)="getItems()">Refresh items</button>
`,
})
export class App {

constructor() {
this.collection = [{id: 1}, {id: 2}, {id: 3}];
}

getItems() {
this.collection = this.getItemsFromServer();
}

getItemsFromServer() {
return [{id: 1}, {id: 2}, {id: 3}, {id: 4}];
}

trackByFn(index, item) {
return index; // or item.id
}
}

现在,当您更改集合时,Angular可以根据唯一标识符跟踪已添加或删除的项目,并仅创建或销毁已更改的项目。


你可以在这里找到代码


本文翻译自:Angular 2 — Improve Performance with trackBy

分享到:

发表评论

评论列表