React
Jak i dlaczego używać kluczy w React
Szukaj…
Wprowadzenie
Za każdym razem, gdy wyświetlasz listę składników React, każdy składnik musi mieć key atrybut. Klucz może mieć dowolną wartość, ale musi być unikalny dla tej listy.
Kiedy React musi renderować zmiany na liście przedmiotów, React tylko iteruje obie listy dzieci w tym samym czasie i generuje mutację, gdy tylko pojawi się różnica. Jeśli dla dzieci nie są ustawione żadne klucze, React skanuje każde dziecko. W przeciwnym razie React porównuje klucze, aby dowiedzieć się, które zostały dodane lub usunięte z listy
Uwagi
Aby uzyskać więcej informacji, odwiedź ten link, aby przeczytać, jak używać kluczy: https://facebook.github.io/react/docs/lists-and-keys.html
I odwiedź ten link, aby dowiedzieć się, dlaczego zaleca się używanie kluczy: https://facebook.github.io/react/docs/reconciliation.html#recursing-on-children
Podstawowy przykład
W przypadku bezklasowego komponentu React:
function SomeComponent(props){
const ITEMS = ['cat', 'dog', 'rat']
function getItemsList(){
return ITEMS.map(item => <li key={item}>{item}</i>);
}
return (
<ul>
{getItemsList()}
</ul>
);
}
W tym przykładzie powyższy składnik rozwiązuje:
<ul>
<li key='cat'>cat</li>
<li key='dog'>dog</li>
<li key='rat'>rat</li>
<ul>