Вы когда-нибудь задумывались, когда использовать атрибут trackBy? Или как его использовать при отображении нескольких элементов из массива JavaScript?

Атрибут trackBy позволяет нам определять функцию, которая возвращает уникальный идентификатор для каждого итеративного элемента.

Прежде чем двигаться дальше, нам нужно понять некоторые основы директивы ngFor, прежде чем переходить к обнаружению изменений и DOM манипуляциям для повышения производительности ngFor-loop с помощью trackBy.

Давайте начнем!

Что такое директива ngFor?

Это основная директива, которая входит в состав самой структуры Angular. Это позволяет легко перебирать что-то вроде массива или объекта и создавать шаблон для каждого элемента.
Давайте посмотрим, как это выглядит:

<ul> 
    <li *ngFor=”let item of array”></li>
</ul>
  • «let item» создает локальную переменную, которая будет доступна в шаблоне, и содержит ссылку на текущий элемент массива.
  • «Of array» означает, что он будет перебирать массив, который будет в нашем компоненте.
  • ‘*’ символ создает родительский шаблон .

Как мы все знаем, с точки зрения производительности манипуляции с DOM обходятся дороже, чем обычный код JavaScript.

Обычно повторное отображение списка происходит одним из следующих способов:

  1. При добавлении элемента в массив,
  2. При удалении элемента из массива
  3. О изменении порядка объектов в массиве.

Директива Angular ‘ngFor’ сильно оптимизирована и сводит манипуляции с DOM к минимуму.

Таким образом, если элемент добавлен или удален из массива, весь список не будет повторно отрисован. Тогда как он будет использовать все существующие элементы DOM, и только новый элемент будет создан или удален.

Точно так же, когда элемент меняет свое положение в массиве, замечается только это изменение положения элемента DOM.

Angular определяет все манипуляции с DOM и выполняет их оптимизацию, поскольку он проводит идентификацию каждого объекта в массиве. Для этого он использует ссылку на объект.



Каковы различные элементы макетов Angular Flex?
Всякий раз, когда мы создаем какой-либо макет, он должен создаваться таким образом, чтобы он подходил и реагировал на весь экран ... Лаборатории DLT на medium.com



Почему и когда использовать атрибут trackBy с директивой ngFor

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

Например, в сценариях, когда мы работаем с REST-API или используем неизменяемые структуры данных, ссылка на каждый объект постоянно меняется.

Это приводит к тому, что angular отказывается от всей оптимизации, что приводит к повторной визуализации всего списка. Это связано с тем, что каждая ссылка изменяется, и поэтому каждый объект кажется новым для angular. Это может сильно повлиять на производительность, особенно для больших коллекций.

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

Атрибут trackBy позволяет нам определять функцию, которая возвращает уникальный идентификатор для каждого итеративного элемента. Это помогает избежать ненужных и дорогостоящих сравнений при изменении списка данных, например, при получении новых данных из вызова API.

Следовательно, Angular будет идентифицировать элементы по этому уникальному идентификатору, так как это значение не (не должно) изменяться при изменении ссылки, и angular может применить оптимизацию.

Как реализовать трекбай в Angular?

Чтобы определить функцию Trackby, мы должны сначала создать ее в нашем компоненте.

Что такое функция trackby?

Функция trackby принимает index и текущий элемент в качестве аргументов и возвращает уникальный идентификатор для этого элемента.

Вот пример:

trackBy.component.ts
import { Component } from ‘@angular/core’
@Component({
  selector: ‘app-trackBy’,
  templateUrls: ‘./ trackBy.component.html’,styleUrls: [‘./                                                                                                                                                                                      trackBy.component.css’],
})
export class TrackByComponent {  
  array = [
    {
     hash: ‘14u0ea57-dh58–92bc-befe6-j8c4xsj410fb7’,
     id: 0136, 
     name: ‘Robert De-Niro’,
},
    {
     hash: ‘sj4i43n3–3ndj-3hcd-sj47-xdchjhrf74315f’,
     id: 1469, 
     name: ‘Al-Pachino’,},
    {
     hash: ‘9338bdjc-dh47–39hd-b6a6n-snbjsbdjw7’,
     id: 2830, 
     name: ‘Martin Scorcesse’,},
    {
     hash: ‘39dbjsd-du38–43dd-39dcbd-38bcdjncjjd’,
     id: 1742, 
     name: ‘Terence Malik’,
},]
    trackFunction ( index: number, element: any ) {
    return element ? element.hash : null
}
}

В нашем примере уникальным идентификатором для идентификации будет хэш элемента. Но это также может быть любой ключ, специфичный для этого объекта.

Мы также должны сообщить директиве ngFor, какую функцию она должна использовать для идентификации элемента коллекции.

Вот как это выглядит:

trackBy.component.html
<ul>
<li *ngFor=”let element of array; trackBy: trackFunction”></li>
</ul>

На этом пока все.

Удачного кодирования!

Сегодняшняя производительность приложений - это то, о чем мы все сегодня беспокоимся. У нас были некоторые мысли по этому поводу, о которых вы можете прочитать здесь:



5 советов по созданию высокопроизводительных приложений Node.js
Мы делимся 5 способами повышения производительности при создании приложений Node.js DLT Labs на medium.com



Автор - Дивакар Сингх, DLT Labs ™

Об авторе: Дивакар - заядлый читатель, который находит удовольствие в изучении новых технологий. Кроме того, он хорошо разбирается в технологии Blockchain и имеет опыт работы с Angular и NodeJs.