React
Hur och varför man använder nycklar i React
Sök…
Introduktion
När du gör en lista över Reagera komponenter, varje komponent behov har en key Nyckeln kan vara valfritt värde, men den behöver vara unik för listan.
När React måste göra ändringar på en lista med objekt, så reagerar det bara över båda listorna över barn på samma gång och genererar en mutation när det finns skillnad. Om det inte finns några nycklar för barnen, skannar React varje barn. Annars jämför React tangenterna för att veta vilka som lagts till eller tas bort från listan
Anmärkningar
För mer information, besök denna länk för att läsa hur du använder nycklar: https://facebook.github.io/react/docs/lists-and-keys.html
Och besök den här länken för att läsa varför det rekommenderas att använda nycklar: https://facebook.github.io/react/docs/reconciliation.html#recursing-on-children
Grundläggande exempel
För en klassfri React-komponent:
function SomeComponent(props){
const ITEMS = ['cat', 'dog', 'rat']
function getItemsList(){
return ITEMS.map(item => <li key={item}>{item}</i>);
}
return (
<ul>
{getItemsList()}
</ul>
);
}
I det här exemplet beslutar komponenten ovan att:
<ul>
<li key='cat'>cat</li>
<li key='dog'>dog</li>
<li key='rat'>rat</li>
<ul>