Was ist die Verwendung des Schlüssels in React

In React wird der Schlüssel verwendet, um Komponenten zu identifizieren, die sich geändert haben, wenn bestimmte Elemente im DOM hinzugefügt oder gelöscht werden. Es ist eine Art Identifizierung, ob die Komponente zerstört oder aktualisiert werden soll Wenn der Schlüssel gleich ist und sich die Komponente ändert, werden nur die entsprechenden Eigenschaften der Komponente aktualisiert. Wenn der Schlüssel unterschiedlich ist, wird die vorherige Komponente zerstört und neu gerendert.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Was ist die Verwendung des Schlüssels in React? Einfach ausgedrückt: React verwendet den Schlüssel zur Identifizierung von Komponenten. Es handelt sich um eine Identitätskennung, genau wie unser Personalausweis zur Identifizierung einer Person verwendet wird. Jeder Schlüssel entspricht einer Komponente. React betrachtet denselben Schlüssel als dieselbe Komponente, sodass nachfolgende Komponenten, die demselben Schlüssel entsprechen, nicht erstellt werden.

Schlüssel können React dabei helfen, zu erkennen, welche Elemente sich geändert haben, wenn bestimmte Elemente im DOM hinzugefügt oder gelöscht werden. Daher sollten Sie jedem Element im Array eine bestimmte Identität geben.

Der Diff-Algorithmus von React behandelt den Schlüssel als eindeutige ID und vergleicht dann den Wert der Komponente, um festzustellen, ob sie aktualisiert werden muss. Wenn kein Schlüssel vorhanden ist, weiß React daher nicht, wie die Komponente aktualisiert werden soll.

Sie können es weiterhin verwenden, ohne den Schlüssel zu übergeben, denn nachdem React erkennt, dass die Unterkomponente keinen Schlüssel hat, wird standardmäßig der Index des Arrays als Schlüssel verwendet.

React entscheidet anhand des Schlüssels, ob die Komponente zerstört, neu erstellt oder aktualisiert wird. Das Prinzip ist:

Der Schlüssel ist derselbe und wenn sich die Komponente ändert, aktualisiert React nur die entsprechenden Eigenschaften der Komponente.
key ist anders, die Komponente zerstört die vorherige Komponente und rendert die gesamte Komponente neu.
Schlüsselverwendungsszenarien

In der Projektentwicklung sind die häufigsten Verwendungsszenarien für Schlüsselattribute Unterkomponenten, die dynamisch aus Arrays erstellt werden. Zu jeder Unterkomponente muss ein eindeutiger Schlüsselattributwert hinzugefügt werden. Dann werden einige Leute natürlich denken, dass der Wert der Indexposition, die durch den Schlüssel und das dynamisch gerenderte Unterelement erhalten wird, sehr nahe beieinander liegt. Ist es nicht möglich, den Index direkt zum Anhängen des Schlüsselwerts zu verwenden? }?

Zum Beispiel:

{dataList.map((item,index)=>{
    return <div style={mystyle} key={index}>{item.name}</div>
    })
}

Nachdem Sie es ausprobiert haben, werden Sie feststellen, dass der Fehler verschwunden ist und die Darstellung kein Problem darstellt, ist das nicht normal? ! Es wird jedoch dringend davon abgeraten, den Array-Index als Schlüssel zu verwenden.

Wenn es sich bei der Datenaktualisierung lediglich um eine Neuordnung des Arrays oder das Einfügen eines neuen Elements an seiner mittleren Position handelt, werden alle Ansichtselemente neu gerendert.

Zum Beispiel:

Nachdem das Element mit Index = 2 nach vorne verschoben wurde, ändert sich auch der Schlüssel des Elements. Dann hat der Schlüssel, der sich auf diese Weise ändert, keine Existenzbedeutung, da er dasselbe ist wie ein „. „Personalausweis“ Wenn er vorhanden ist, besteht kein Platz für einen Verlust. Wenn Sie Schlüsselwerte zum Erstellen von Unterkomponenten verwenden und der Inhalt des Arrays nur zur reinen Anzeige dient und keine dynamischen Änderungen im Array mit sich bringt, können Sie natürlich den Index tatsächlich als Schlüssel verwenden.

Empfohlenes Lernen: „

Video-Tutorial reagieren

“

Das obige ist der detaillierte Inhalt vonWas ist die Verwendung des Schlüssels in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!