TrackBy функции для списков

В Angular списки часто реализуются с помощью директивы *ngFor. При обновлении массива Angular по умолчанию пересоздаёт все элементы DOM, что может вызывать снижение производительности при работе с большими списками. Для оптимизации используется trackBy функция, которая позволяет Angular идентифицировать элементы и обновлять только изменившиеся.

Синтаксис использования trackBy:

<li *ngFor="let item of items; trackBy: trackById">{{ item.name }}</li>
trackById(index: number, item: any): number {
  return item.id;
}

Принцип работы:

  • trackBy принимает два аргумента: индекс элемента в массиве и сам элемент.
  • Функция возвращает уникальный идентификатор элемента, чаще всего это id или любой другой уникальный ключ.
  • Angular сравнивает старый и новый массивы по возвращаемым значениям функции trackBy и обновляет только изменившиеся элементы.

Пример оптимизации больших списков:

@Component({
  selector: 'app-user-list',
  template: `
    <ul>
      <li *ngFor="let user of users; trackBy: trackByUserId">
        {{ user.name }}
      </li>
    </ul>
  `
})
export class UserListComponent {
  users = [
    { id: 1, name: 'Алексей' },
    { id: 2, name: 'Мария' },
    { id: 3, name: 'Иван' }
  ];

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

Преимущества использования trackBy:

  • Значительно уменьшает количество операций рендеринга DOM.
  • Сохраняет состояние внутренних компонентов, таких как формы или элементы с локальным состоянием.
  • Улучшает производительность при динамических изменениях массивов (добавление, удаление, сортировка).

Рекомендации:

  • Всегда использовать trackBy для больших списков и таблиц.
  • Использовать уникальные идентификаторы объектов, а не индекс, если возможны перестановки элементов.
  • Для простых массивов примитивов можно возвращать сам элемент: trackBy: item => item.

trackBy и правильная организация анимаций с временными функциями позволяют создавать интерфейсы Angular, которые остаются отзывчивыми и визуально приятными даже при работе с большими объёмами данных.

Оглавление