Warum wird in React nicht empfohlen, einen Index als Schlüssel zu verwenden?
|
1. Vergleichen Sie den alten virtuellen DOM mit dem neuen virtuellen DOM und prüfen Sie zunächst, ob ihre Schlüssel identisch sind Welche Probleme könnten also auftreten, wenn wir den während der Durchquerung automatisch generierten Index als Schlüssel jedes Knotens verwenden? Hier ein kleiner Fall Zunächst durchlaufen wir Personen am Anfang Er wird ein solcher Prozess sein, Quelldaten
Personen:
{ ID: 1, Name: „张三“, Alter: 15 },
{ ID: 2, Name: „Li Si“, Alter: 16 },
], Generierter echter DOM-Knoten
<ul>
<li key="0">Zhang San – 15</li>
<li Taste="1">Li Si--16</li>
</ul>
Dann fügen wir vor dieser Liste die Daten {id:3,name:'王五',age:14} ein und es wird so aussehen
<ul>
<li key="0">Wang Wu – 14</li>
<li key="1">Zhang San – 15</li>
<li Taste="2">Li Si--16</li>
</ul> Durch das obige Update können wir feststellen, dass Wang Wu den vorherigen Schlüssel von Zhang San belegt hat. Das heißt, wenn ich diesen Prozess aktualisiere, wird der neue virtuelle Dom <li key="0">Wang Wu – 14</li> und der alte virtuelle Dom <li key="0">Zhang San – 15</li> Vergleichen Sie beim Vergleichen des neuen DOM zunächst die Schlüssel der beiden, um zu sehen, ob sie gleich sind. Beim Vergleichen der Inhalte ist einer Wang Wu-14 und der andere Zhang San 15. Der Inhalt hat sich geändert. Zu diesem Zeitpunkt wird der neue virtuelle DOM verwendet, um einen neuen realen DOM zu generieren und die Seite neu zu rendern. Nicht nur der vorherige Zhang San ist betroffen und muss neu generiert werden, sondern auch der nachfolgende Li Si wird durch Zhang San ersetzt, um einen neuen realen DOM mit dem Inhalt von Zhang San zu generieren. Dies führt dazu, dass alle DOMs neu generiert und neu gerendert werden, was zu einer Leistungsverschlechterung führt.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-kompatibel" content="IE=edge" />
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
<title>Dokument</title>
</Kopf>
<Text>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/babel.js"></script>
<div id="Wurzel"></div>
<Skripttyp="text/babel">
let root = document.getElementById("root");
Klasse App erweitert React.Component {
Konstruktor(Requisiten) {
super(Requisiten);
}
Zustand = {
Personen:
{ ID: 1, Name: "张三", Alter: 15 },
{ ID: 2, Name: "Li Si", Alter: 16 },
],
};
Griff = () => {
const { Personen } = dieser.Zustand;
Konstante p = {
ID: 0,
Name: "Wang Wu",
Alter: 14,
};
dies.setState({
Personen: [p, ...Personen],
});
};
rendern() {
zurückkehren (
<div>
<button onClick={this.handle}>Zum Hinzufügen klicken</button>
<ul>
{this.state.persons.map((person, index) => (
<li-Schlüssel={index}>
{Person.Name}--{Person.Alter}
</li>
))}
</ul>
</div>
);
}
}
ReactDOM.render(<App name="hell" />, root);
</Skript>
</body>
</html> Stellen Sie sich vor, was passieren würde, wenn wir nach der obigen Ableitung die ID als einzigen Schlüsselwert verwenden würden. Vor dem Update
<ul>
<li key="1">Zhang San – 15</li>
<li Taste="2">Li Si--16</li>
</ul>
Nach dem Update
<ul>
<li key="0">Wang Wu – 14</li>
<li key="1">Zhang San – 15</li>
<li Taste="2">Li Si--16</li>
</ul>
Obwohl Wang Wu dieses Mal vor Zhang San eingefügt wird, vergleicht er nur Wang Wu und den Knoten darüber, um zu sehen, ob sie denselben Knoten mit Schlüssel=0 haben. Es wird kein neuer realer DOM zum Rendern generiert. Zhang San vergleicht den Knoten darüber mit Schlüssel=1 und findet, dass es einen Knoten mit Schlüssel=1 gibt. Dann vergleicht er ihre Inhalte, um zu sehen, ob sie gleich sind. Wenn sie gleich sind, kann der alte reale DOM wiederverwendet werden, um Leistung zu sparen. Dies ist das Ende dieses Artikels darüber, warum es nicht empfohlen wird, in React Index als Schlüssel zu verwenden. Weitere relevante Inhalte zu React Index als Schlüssel finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: Löschen von Dateien mit Leerzeichen in Linux (keine Verzeichnisse)
>>: So ändern Sie den Hostnamen in Linux
Artikel empfehlen
Tatsächlicher Datensatz zur Wiederherstellung der MySQL-Datenbank nach Zeitpunkt
Einführung: MySQL-Datenbankwiederherstellung nach...
Linux Dateisystemtyp anzeigen Beispielmethode
So überprüfen Sie den Dateisystemtyp einer Partit...
Lösungen zur Verarbeitung und Reparatur historischer Linux-Images
Der ECS-Cloud-Server, der mit dem historischen Li...
Was sind Ihre Grundsätze für die Gestaltung von Indizes? Wie lassen sich Indexfehler vermeiden?
Inhaltsverzeichnis Primärschlüsselindex Erstellen...
Eine kurze Diskussion über den CSS-Kaskadierungsmechanismus
Warum hat CSS einen Kaskadierungsmechanismus? Da ...
So erstellen Sie MySQL-Indizes richtig
Die Indizierung ähnelt dem Erstellen bibliografis...
Aufrufen und Ausführen von Host-Docker-Operationen im Docker-Container
Zunächst einmal ist dieser Beitrag Docker-Neuling...
Bringen Sie Ihnen bei, wie Sie ein React+Antd-Projekt von Grund auf erstellen
Bei den vorherigen Artikeln handelte es sich um m...
Webdesign-Tutorial (6): Behalte deine Leidenschaft für Design
<br />Vorheriger Artikel: Webdesign-Tutorial...
Lösung zur automatischen Beendigung von Docker Run-Containern
Heute ist bei mir ein Problem aufgetreten, als ic...
Eine vollständige Aufzeichnung des Prozesses zum Erstellen mobiler Anwendungen mit Vue Native
Inhaltsverzeichnis Vorwort Funktionen von Vue Nat...
Installieren Sie das Linux rhel7.3-Betriebssystem auf der virtuellen Maschine (bestimmte Schritte)
Installieren Sie Virtualisierungssoftware Bevor S...
Methode zur Optimierung von MySQL-Gruppenabfragen
MySQL behandelt GROUP BY- und DISTINCT-Abfragen i...
jQuery implementiert ein atmendes Karussell
In diesem Artikel wird der spezifische Code von j...
So verwenden Sie eine Karte, um die domänenübergreifende Nutzung mehrerer Domänennamen in Nginx zu ermöglichen
Die übliche Nginx-Konfiguration ermöglicht domäne...