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
Verschiedene Front-End-Druckmethoden des Webs: CSS steuert den Druckstil von Webseiten
CSS steuert den Druckstil von Webseiten : Verwende...
Detaillierte Erklärung zur Verwendung von css-vars-ponyfill in der IE-Umgebung (nextjs-Build)
CSS-Vars-Ponyfill Bei der Verwendung von CSS-Vari...
Detaillierte Methode zur Verwendung von GoAccess zum Analysieren von Nginx-Protokollen
Vor kurzem wollte ich Goaccess verwenden, um Ngin...
Probleme bei der Verwendung der Rich-Text-Bearbeitung mit Wangeditor in Vue
wangEditor ist ein webbasierter Rich-Text-Editor,...
HTML zeigt Auslassungspunkte hinter dem Text an... implementiert durch Textüberlauf
Sie müssen CSS gleichzeitig auf Div oder Span anwe...
Regeln für die Gestaltung des Anmeldeformulars
Ich habe „Patterns for Sign Up & Ramp Up“ vor ...
Wo wird der von IntelliJ IDEA mit Tomcat bereitgestellte Projektspeicherort verwendet?
Nachdem IntelliJ IDEA ein Javaweb-Projekt mit Tom...
Kali Linux Installation VMware Tools Installationsprozess und VM Installation vmtools button grau
Xiaobai zeichnet die Installation von vmtools auf...
Zusammenfassung der sieben grundlegenden XHTML-Codierungsregeln
1. Alle Tags müssen ein entsprechendes End-Tag hab...
Nginx definiert die Zugriffsmethode für Domänennamen
Ich erstelle derzeit Nginx, kann aber nicht über ...
Tutorial zur Installation und Verwendung der verteilten Ceph-Software unter Linux
Inhaltsverzeichnis Vorwort 1. Grundlegende Umgebu...
Vue implementiert zwei Methoden zur Steuerung der Routing-Berechtigung
Inhaltsverzeichnis Methode 1: Routing von Metainf...
XHTML-Tutorial für den Einstieg: Häufig verwendete XHTML-Tags
<br />Genau wie ein Artikel sollten unsere W...
Bei der anonymen Mysql-Anmeldung kann keine Datenbankproblemlösung erstellt werden
Häufig gestellte Fragen Der Zugriff für den Benut...
Detaillierte Erklärung des gesamten Prozesses zum Erstellen eines persönlichen Blogs mit nginx+WordPress
0x00 Einführung WordPress ist das beliebteste CMS...