面试题：Angular中NgFor指令的性能优化与TrackBy函数应用

利用TrackBy函数优化NgFor性能

TrackBy函数的作用：在NgFor渲染大量数据列表时，默认情况下Angular会为每个列表项创建一个新的视图，当数据发生变化时，Angular会重新创建和销毁视图，这导致性能问题。TrackBy函数可以帮助Angular识别列表项的唯一性，使得Angular在数据变化时，能够复用已有的视图，而不是重新创建和销毁，从而提升性能。
TrackBy函数的参数：
- index: 列表项在数组中的索引，类型为number。它表示当前正在处理的列表项在数据源数组中的位置。
- item: 当前正在处理的列表项，类型取决于数据源数组中元素的类型。例如，如果数据源数组是User对象数组，那么item就是User类型的对象。
TrackBy函数的返回值：返回值用于标识列表项的唯一性。通常返回列表项中一个唯一的属性值，如id。如果列表项没有唯一属性，可以使用索引index，但使用唯一属性（如id）会更高效。返回值应该是一个稳定的值，即列表项在其生命周期内该值不会改变，这样Angular才能正确地识别和复用视图。

代码示例

假设我们有一个用户列表，每个用户有id和name属性：

import { Component } from '@angular/core';

interface User {
  id: number;
  name: string;
}

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  users: User[] = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
  ];

  trackByUserId(index: number, user: User): number {
    return user.id;
  }
}

在模板文件example.component.html中：

<ul>
  <li *ngFor="let user of users; trackBy: trackByUserId">
    {{ user.name }}
  </li>
</ul>

在上述代码中，trackByUserId函数返回用户的id作为唯一标识，*ngFor指令通过trackBy: trackByUserId来使用这个函数，使得Angular在处理users列表数据变化时，能够基于id更高效地复用视图，提升性能。

面试题：Angular中NgFor指令的性能优化与TrackBy函数应用

知识考点

面试题答案

利用TrackBy函数优化NgFor性能

代码示例