React
Hoe en waarom sleutels gebruiken in React
Zoeken…
Invoering
Wanneer u een lijst met React-componenten weergeeft, moet elke component een key hebben. De sleutel kan elke waarde hebben, maar deze moet wel uniek zijn voor die lijst.
Wanneer React wijzigingen moet aanbrengen in een lijst met items, wordt React alleen herhaald door beide lijsten van kinderen tegelijk en wordt een mutatie gegenereerd wanneer er een verschil is. Als er geen sleutels zijn ingesteld voor de kinderen, scant React elk kind. Anders vergelijkt React de sleutels om te weten welke zijn toegevoegd of verwijderd uit de lijst
Opmerkingen
Voor meer informatie, bezoek deze link om te lezen hoe sleutels te gebruiken: https://facebook.github.io/react/docs/lists-and-keys.html
En bezoek deze link om te lezen waarom het wordt aanbevolen om sleutels te gebruiken: https://facebook.github.io/react/docs/reconciliation.html#recursing-on-children
Basis voorbeeld
Voor een klasse-minder React-component:
function SomeComponent(props){
const ITEMS = ['cat', 'dog', 'rat']
function getItemsList(){
return ITEMS.map(item => <li key={item}>{item}</i>);
}
return (
<ul>
{getItemsList()}
</ul>
);
}
Voor dit voorbeeld wordt de bovenstaande component opgelost in:
<ul>
<li key='cat'>cat</li>
<li key='dog'>dog</li>
<li key='rat'>rat</li>
<ul>