React
Wie und warum werden Schlüssel in React verwendet?
Suche…
Einführung
Wenn Sie eine Liste von React-Komponenten rendern, muss jede Komponente über ein key verfügen. Der Schlüssel kann ein beliebiger Wert sein, muss jedoch für diese Liste eindeutig sein.
Wenn React Änderungen an einer Liste von Elementen wiedergeben muss, durchläuft React beide Listen von Kindern zur gleichen Zeit und generiert eine Mutation, wenn ein Unterschied besteht. Wenn für die Kinder keine Schlüssel festgelegt sind, durchsucht React jedes Kind. Andernfalls vergleicht React die Schlüssel, um festzustellen, welche der Liste hinzugefügt oder aus ihr entfernt wurden
Bemerkungen
Weitere Informationen finden Sie unter diesem Link, um zu erfahren, wie Sie Schlüssel verwenden: https://facebook.github.io/react/docs/lists-and-keys.html
Besuchen Sie diesen Link, um zu erfahren, warum die Verwendung von Schlüsseln empfohlen wird: https://facebook.github.io/react/docs/reconciliation.html#recursing-on-children
Basisbeispiel
Für eine klassenlose React-Komponente:
function SomeComponent(props){
const ITEMS = ['cat', 'dog', 'rat']
function getItemsList(){
return ITEMS.map(item => <li key={item}>{item}</i>);
}
return (
<ul>
{getItemsList()}
</ul>
);
}
Für dieses Beispiel wird die obige Komponente wie folgt aufgelöst:
<ul>
<li key='cat'>cat</li>
<li key='dog'>dog</li>
<li key='rat'>rat</li>
<ul>