Acabo de empezar con Angular hace un par de semanas. En Vue y React, siempre usamos una clave única cuando renderizamos una matriz de elementos, para una renderización más eficiente, especialmente cuando los elementos y el orden o la cantidad de ellos cambia, es útil. Por lo tanto create-react-app o Vue CLI siempre le gritarán si olvida asignar la propiedad key en los elementos.
Pero, ¿por qué no hay tal advertencia o error en Angular? ¿Y cómo angular logra representar una lista y cambios en ella sin una propiedad key en los elementos de la lista de manera eficiente?
Ingrese el v-for de Vue: https://vuejs.org/guide/essentials/list.html#maintaining-state-with-key
Claves en el mapa de React: https://reactjs.org/docs/lists-and-keys.html#keys
Angular usa la identidad del objeto para rastrear inserciones y eliminaciones dentro del iterador y reproducir esos cambios en el DOM.
[...]
Las identidades de los elementos en el iterador pueden cambiar mientras que los datos no. Esto puede suceder, por ejemplo, si el iterador se produce desde una RPC al servidor y esa RPC se vuelve a ejecutar. Incluso si los datos no han cambiado, la segunda respuesta produce objetos con identidades diferentes, y Angular debe derribar todo el DOM y reconstruirlo (como si todos los elementos antiguos se eliminaran y se insertaran todos los elementos nuevos).
Para evitar esta costosa operación, puede personalizar el algoritmo de seguimiento predeterminado. proporcionando la opción trackBy a NgForOf. trackBy toma una función que tiene dos argumentos: índice y elemento. Si se da trackBy, Angular rastrea los cambios por el valor de retorno de la función.
En resumen, no necesariamente lo necesitas. Si sabe que las identidades de sus objetos cambiarán y se producirá una renderización superflua, entonces puede proporcionar su propia función trackBy y decidir por sí mismo cuándo se debe volver a renderizar un elemento.
Obtuve las citas de este enlace de documentación .