Cuando tiene una matriz de componentes, debe especificar una clave como esta:
Ejemplo 1:
const els = losElementos.map(el => <div key={el.id}>el.siPeroNo</div>)Eso es para optimizar el proceso de renderizado.
Pero, ¿qué tal un componente como este?
Ejemplo 2:
function fixedList() => { return ( <div> <div>first item on a list</div> <div>second one</div> </div> ) }Hay dos hermanos sin llaves, ¿tener una llave ahí haría alguna diferencia? (imagínense si hay muchos de ellos....)
¿Qué pasa si uno es un div y el otro es una sección, tener una clave ahora hace una diferencia?
Ejemplo 3:
function fixedListWhoDoesSecs() => { return ( <div> <div>first item on a list</div> <section>second one but the type is different</section> </div> ) }¿Qué hay de este?
Ejemplo 4:
function someComps() => { return ( <> <div>first item on a list</div> <div>second one</div> <LeCustomTomato /> <ChefsNoubleGoal stuff={yez} /> </> ) }¿Tener la etiqueta vacía cambia algo?
Para resumir en una pregunta: ¿las claves solo son útiles cuando genera una matriz dinámica de componentes?
necesita definir la propiedad clave cuando está representando una matriz; de lo contrario, reaccionar arrojará un error
De forma predeterminada, cuando recurre a los hijos de un nodo DOM, React simplemente itera sobre ambas listas de hijos al mismo tiempo y genera una mutación cada vez que hay una diferencia.
Por ejemplo, al agregar un elemento al final de los elementos secundarios, la conversión entre estos dos árboles funciona bien:
<ul> <li>Duke</li> <li>Villanova</li> </ul> <ul> <li>Connecticut</li> <li>Duke</li> <li>Villanova</li> </ul>Si lo implementa de forma ingenua, insertar un elemento al principio tiene un peor rendimiento. Para resolver este problema, React admite un atributo clave. Cuando los niños tienen claves, React usa la clave para hacer coincidir los niños en el árbol original con los niños en el árbol subsiguiente. Por ejemplo, agregar una clave a nuestro ejemplo ineficiente anterior puede hacer que la conversión del árbol sea eficiente:
<ul> <li key="2015">Duke</li> <li key="2016">Villanova</li> </ul> <ul> <li key="2014">Connecticut</li> <li key="2015">Duke</li> <li key="2016">Villanova</li> </ul>Ahora React sabe que el elemento con la clave '2014' es el nuevo, y los elementos con las claves '2015' y '2016' se acaban de mover.