En un principio mi intención era hablar sobre la directiva ngFor*, mientras me documentaba y revisaba apuntes, recordé trackBy.
¿Por qué nos olvidamos de trackBy?
La verdad que no lo sé, pero todo lo que pueda ayudar mejorar el perfomance de mi aplicación es bienvenido.
En este post vamos a hablar sobe trackBy, como nos puede ayudar a mejorar el rendimiento.
*ngFor
La directiva ngFor es comúnmente usada para iterar sobre un array.
ngFor export algunas variables locales que podemos utilizar durante la iteración actual:
- index: iteración de bucle actual para cada contexto del template.
- first: valor booleano que indica si el elemento es el primero en la iteración.
- last: valor booleano que indica si el elemento es el último en la iteración.
- even: valor que indica si este elemento tiene un índice par.
- odd: valor booleano que indica si este elemento tiene un índice impar.
<li *ngFor="let item of items;let i=index">{{i}} - {{item.name}}</li>En este ejemplo la directiva recorrería todo el array de items.
Y se renderiza el contenido de item.
Angular convertirá este código en lo siguiente.
<ng-template ngFor let-item [ngForOf]="items" let-i="index">
<div>({{i}}) {{item.name}}</div>
</ng-template>Hasta aquí todo bien, ningún problema a la vista.
Pero internamente cada vez se añada, modifiques o elimines un item del array, Angular a través de la directiva *ngFor volverá a redibujar completemente el DOM desde cero. Y esto es una operación costosa.
En aplicaciones medianas o grandes esto puede llegar a ser un problema.
Debería existir algo capaz de encargarse de realizar un seguimiento de los cambios en el array por lo tanto en el los elementos y que solo hiciera los cambios o el cambio en los items necesarios.
Y sí, existe y es trackBy.
Vamos a mejorar nuestro ejemplo anterior.
<li *ngFor="let item of items;let i=index;trackBy: trackByItems">
{{i}} - {{item.name}}
</li><ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByItems”>
<div>({{i}}) {{item.name}}</div>
</ng-template>en nuestro .ts
trackByItems(index: number, item: any): number { return item.id; }trackBy
Es una función que define cómo realizar un seguimiento de los cambios para los elementos en el iterable.
Ahora cada vez que se agregue, mueva o elimine elementos en el array,
Cuando se agregan, mueven o eliminan elementos en el iterable, la directiva, sólo volverá a redibujar los items que han cambiado.
Cuando se proporciona esta función, la directiva utiliza el resultado de llamar a esta función para identificar el nodo del elemento, en lugar de la identidad del objeto en sí.
La función recibe dos entradas, el índice de iteración y el ID del objeto del nodo (item).
Pues esto es todo por este post!
Si te ha gustado recuerdo compartirlo.
Hasta la próxima.
