Wozu dient der React-Schlüssel?

Die Funktion von Key-In-React besteht darin, zu bestimmen, ob das Element im Diff-Algorithmus neu erstellt oder verschoben wird, wodurch unnötige Diffs reduziert werden, das heißt, die Effizienz des Diff-Peer-Vergleichs zu verbessern und eine In-situ-Wiederverwendung zu vermeiden Der Schlüssel ; ist eine Kennung, die von React verwendet wird, um zu verfolgen, ob ein Element der Liste geändert, hinzugefügt oder gelöscht wurde.

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

Wozu dient der Schlüssel in React? Funktion unnötiges Diff reduzieren

Im Diff-Algorithmus von React verwendet React den Schlüssel des Elements, um zu bestimmen, ob das Element neu erstellt oder verschoben wird, wodurch unnötiges Element-Rendering reduziert wird. Darüber hinaus muss die Reaktion auch die Beziehung zwischen dem Element und dem lokalen Zustand anhand des Schlüssels beurteilen. Vereinfacht ausgedrückt besteht dies darin, die Effizienz des Peer-Vergleichs von Diff zu verbessern und die durch die Wiederverwendung vor Ort verursachten Nebenwirkungen zu vermeiden. vue und React selbst verwenden den Diff-Algorithmus, der einen Listener an jedes Attribut bindet, wobei jede kleine Änderung eine brandneue ist vdom wird für diff generiert. Es kann vorkommen, dass er aktualisiert wird, aber nicht. Der Schlüssel wird von React verwendet, um zu verfolgen, welche Elemente der Liste geändert und hinzugefügt wurden Markierung wurde gelöscht. Während des Entwicklungsprozesses müssen wir sicherstellen, dass der Schlüssel eines Elements unter seinen Geschwisterelementen eindeutig ist.

Wenn die Listendaten gerendert werden und nach den Daten ein Datenelement eingefügt wird, spielt der Schlüssel wie folgt keine große Rolle:

this.state = {
    numbers:[111,222,333]
}
 
insertMovie() {
  const newMovies = [...this.state.numbers, 444];
  this.setState({
    movies: newMovies
  })
}
 
<ul>
    {
        this.state.movies.map((item, index) => {
            return <li>{item}</li>
        })
    }
</ul>

Die vorherigen Elemente sind im Diff-Algorithmus enthalten Das Gleiche gilt, es finden keine Lösch- und Erstellungsvorgänge statt, während des letzten Vergleichs muss es in den neuen DOM-Baum eingefügt werden

Daher bedeutet es in diesem Fall nicht viel, ob das Element ein Schlüsselattribut hat oder nicht

Schauen wir uns die Verwendung des Schlüssels beim früheren Einfügen von Daten an. Der Unterschied zwischen der Nichtverwendung des Schlüssels:

insertMovie() {
  const newMovies = [000 ,...this.state.numbers];
  this.setState({
    movies: newMovies
  })
}

Wenn Sie einen Schlüssel haben, entspricht die Reaktion den Unterelementen im ursprünglichen Baum und den Unterelementen im neuesten Baum Im obigen Fall müssen Sie nur das 000-Element an der vorderen Position einfügen

Wenn kein Schlüssel vorhanden ist, müssen alle li-Tags geändert werdenEbenso bedeutet ein Schlüsselwert keine höhere Leistung . Wenn sich nur der Textinhalt geändert hat, führt das Nichtschreiben des Schlüssels zu einer höheren Leistung und Effizienz

Hauptsächlich, weil das Nichtschreiben des Schlüssels das Ersetzen des gesamten Textinhalts bedeutet, werden sich die Knoten nicht ändern

Und das Schreiben des Schlüssels erfordert das Hinzufügen und Löschen Knoten. Wenn der alte Schlüssel nicht mehr vorhanden ist, löschen Sie ihn. Dann fügen Sie ihn ein, was den Leistungsaufwand erhöht. Eine gute Verwendung von Schlüsselattributen ist ein sehr wichtiger Schritt bei der Leistungsoptimierung. Hinweise sind:

Der Schlüssel sollte eindeutig sein.

Verwenden Sie keine Zufallswerte (Zufallszahlen) für den Schlüssel. Beim nächsten Rendern wird eine Zahl neu generiert.)

Vermeiden Sie die Verwendung des Index als Schlüssel.

Der Prozess der Reaktion Das Schlüsselurteil lautet wie folgt:

Empfohlenes Lernen: „

Video-Tutorial reagieren

“

Das obige ist der detaillierte Inhalt vonWozu dient der React-Schlüssel?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!