React
Come e perché usare le chiavi in React
Ricerca…
introduzione
Ogni volta che si esegue il rendering di un elenco di componenti React, ogni componente deve avere un attributo key . La chiave può essere qualsiasi valore, ma deve essere unica per quella lista.
Quando React deve eseguire il rendering delle modifiche in un elenco di elementi, React esegue semplicemente un'iterazione su entrambi gli elenchi di bambini contemporaneamente e genera una mutazione ogni volta che c'è una differenza. Se non ci sono tasti impostati per i bambini, React esegue la scansione di ogni bambino. Altrimenti, React confronta le chiavi per sapere quali sono stati aggiunti o rimossi dall'elenco
Osservazioni
Per maggiori informazioni, visita questo link per leggere come utilizzare le chiavi: https://facebook.github.io/react/docs/lists-and-keys.html
E visita questo link per sapere perché è consigliabile utilizzare le chiavi: https://facebook.github.io/react/docs/reconciliation.html#recursing-on-children
Esempio di base
Per un componente React senza classe:
function SomeComponent(props){
const ITEMS = ['cat', 'dog', 'rat']
function getItemsList(){
return ITEMS.map(item => <li key={item}>{item}</i>);
}
return (
<ul>
{getItemsList()}
</ul>
);
}
Per questo esempio, il componente sopra risolve:
<ul>
<li key='cat'>cat</li>
<li key='dog'>dog</li>
<li key='rat'>rat</li>
<ul>