Einführung in die spezifische Verwendung von Schlüsseln in React (Codebeispiel)

Dieser Artikel bietet Ihnen eine Einführung in die spezifische Verwendung von Schlüsseln in React (Codebeispiele). Ich hoffe, er hilft.

Bei der Entwicklung von Reaktionsprogrammen stoßen wir oft auf solche Warnungen, und dann denken wir: Oh! Ich habe vergessen, der Schleifenunterkomponente einen Schlüssel hinzuzufügen ~

Aus Bequemlichkeitsgründen wird manchmal ohne nachzudenken der Index der Schleife als Schlüssel verwendet, aber ist das wirklich gut? Welcher Wert ist die beste Wahl für den Schlüssel?

Um das zu verstehen, wird in diesem Artikel „Schlüssel“ unter drei Aspekten analysiert:

1. Warum Schlüssel verwenden?

2. Probleme bei der Verwendung von Index als Schlüssel

3. Richtige Wahl des Schlüssels

1. Warum Schlüssel verwenden

Die offizielle Dokumentation von React beschreibt den Schlüssel wie folgt:

Schlüssel können React helfen Identifizieren Sie, 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 verwenden, ohne den Schlüssel zu übergeben, da React erkennt, dass die Unterkomponente keinen Schlüssel hat und standardmäßig den 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:

• Wenn der Schlüssel derselbe ist und sich die Komponente ändert , React aktualisiert nur die Komponente, die der Änderung entspricht. Wenn der

• Schlüssel unterschiedlich ist, zerstört die Komponente die vorherige Komponente und rendert die gesamte Komponente neu.

2. Probleme bei der Verwendung des Index als Schlüssel

2.1 Kontrollierte Komponenten

Reine Anzeigekomponenten wie span, Diese Komponenten sind kontrollierte Komponenten, was bedeutet, dass ihre Werte die sind, die wir ihnen geben.

Wenn die Unterkomponente nur eine kontrollierte Komponente ist und der Index als Schlüssel verwendet wird, gibt es oberflächlich betrachtet möglicherweise kein Problem, aber tatsächlich wird die Leistung stark beeinträchtigt. Zum Beispiel der folgende Code:

// ['张三','李四','王五']=>

    
• 张三
    
• 李四
    
• 王五

// 数组重排 -> ['王五','张三','李四'] =>

    
• 王五
    
• 张三
    
• 李四

Wenn sich die Reihenfolge der Elementdatenquelle ändert, wird das entsprechende:

Die Komponenten mit den Schlüsseln 0, 1 und 2 haben sich alle geändert, und die drei Unterkomponenten werden neu gerendert. (Das erneute Rendern hier ist keine Zerstörung, da der Schlüssel immer noch vorhanden ist)

Stattdessen verwenden wir die eindeutige ID als Schlüssel:

// ['张三','李四','王五']=>

    
• 张三
    
• 李四
    
• 王五

// 数组重排 -> ['王五','张三','李四'] =>

    
• 王五
    
• 张三
    
• 李四

Gemäß dem oben genannten Aktualisierungsprinzip werden weder der Wert noch die Der Schlüssel der Unterkomponente ist aufgetreten. Änderungen ändern nur die Reihenfolge, daher werden sie durch Reagieren nur verschoben und nicht erneut gerendert.

2.2 Unkontrollierte Komponenten

Komponenten wie Eingaben, die den Wert willkürlich vom Benutzer ändern können und nicht von uns kontrolliert werden, können Probleme verursachen, wenn der Index als Schlüssel verwendet wird:

Untergeordnete Komponente:

  render() {
    return (
      <p>
        </p><p>值：{this.props.value}</p>
        <input>
      
    );
  }
}

Übergeordnete Komponente

{
this.state.data.map((element, index) => {
    return <child></child>
    })
}

Wir tragen die entsprechenden Werte in die ersten beiden Eingabefelder ein:

Dann fügen Sie am Kopf ein Element hinzu:

Offensichtlich entspricht dieses Ergebnis nicht unseren Erwartungen. Lassen Sie uns analysieren, was passiert:

<div>
    <p>值：0</p>
    <input>
</div>
<div>
    <p>值：1</p>
    <input>
</div>
<div>
    <p>值：2</p>
    <input>
</div>

Nach der Änderung:

    
值：5
    

<div>
    <p>值：0</p>
    <input>
</div>
<div>
    <p>值：1</p>
    <input>
</div>
<div>
    <p>值：2</p>
    <input>
</div>

Es kann festgestellt werden, dass: Schlüssel 0, 1, 2 sich nicht geändert haben. Gemäß den Regeln wird die Komponente nicht deinstalliert, sondern nur aktualisiert geänderte Eigenschaften.

react unterscheidet nur die Änderungen des Werts im p-Tag, aber der Wert im Eingabefeld hat sich nicht geändert, sodass er nicht erneut gerendert wird, sondern nur der Wert des p-Tags aktualisiert wird.

Bei Verwendung der eindeutigen ID als Schlüssel:

<div key="000">
    <p >值：0</p>
    <input />
</div>
<div key="111">
    <p >值：1</p>
    <input />
</div>
<div key="222">
    <p >值：2</p>
    <input />
</div>

Nach der Änderung:

    
值：5
    

<div key="000">
    <p >值：0</p>
    <input />
</div>
<div key="111">
    <p >值：1</p>
    <input />
</div>
<div key="222">
    <p >值：2</p>
    <input />
</div>

Es kann Seien Sie offensichtlich Gefunden: Die Komponenten mit den Schlüsseln 111, 222 und 333 haben sich in keiner Weise geändert. React fügt lediglich eine neue Unterkomponente 555 ein und ändert die Positionen anderer Komponenten.

3. Schlüssel richtig auswählen

3.1 Reine Anzeige

Wenn die Komponente nur zur Anzeige dient und keine weiteren Änderungen vorgenommen werden, verwenden Sie den Index Oder Es ist kein Problem, einen anderen Wert als Schlüssel zu verwenden, da kein Unterschied auftritt und der Schlüssel nicht verwendet wird.

3.2 Situationen, in denen die Verwendung des Index empfohlen wird

Die Verwendung des Index als Schlüssel ist in keiner Situation von Nachteil, z. B. in der folgenden Situation:

Sie möchten Rendern Sie eine Liste in Seiten. Jedes Mal, wenn Sie auf „Seite umblättern“ klicken, wird Folgendes neu gerendert:

Eindeutige ID verwenden:

第一页
<ul>
    <li key="000">张三</li>
    <li key="111">李四</li>
    <li key="222">王五</li>
</ul>
第二页
<ul>
    <li key="333">张三三</li>
    <li key="444">李四四</li>
    <li key="555">王五五</li>
</ul>

Nach dem Umblättern haben sich die Schlüssel und Komponenten der drei Datensätze geändert Die drei Unterkomponenten werden entladen und neu gerendert.

Index verwenden:

第一页
<ul>
    <li key="0">张三</li>
    <li key="1">李四</li>
    <li key="2">王五</li>
</ul>
第二页
<ul>
    <li key="0">张三三</li>
    <li key="1">李四四</li>
    <li key="2">王五五</li>
</ul>

Nach dem Umblättern ändert sich der Schlüssel nicht, der Wert der Unterkomponente ändert sich und die Komponente wird nicht deinstalliert, sondern nur aktualisiert.

3.3 Unterkomponenten haben sich möglicherweise geändert/verwenden unkontrollierte Komponenten

In den meisten Fällen wird es kein Problem sein, eine eindeutige ID als Schlüssel für eine Unterkomponente zu verwenden.

Diese ID muss eindeutig und stabil sein, was bedeutet, dass die diesem Datensatz entsprechende ID eindeutig sein muss und sich niemals ändern wird.

Es wird nicht empfohlen, math.random oder andere Bibliotheken von Drittanbietern zu verwenden, um eindeutige Werte als Schlüssel zu generieren.

Denn wenn sich die Daten ändern, können sich auch die Schlüssel derselben Daten ändern und somit erneut gerendert werden, was zu unnötiger Leistungsverschwendung führt.

Wenn die Datenquelle nicht unseren Anforderungen entspricht, können wir der Datenquelle vor dem Rendern manuell eine eindeutige ID hinzufügen, anstatt sie beim Rendern hinzuzufügen.

Das obige ist der detaillierte Inhalt vonEinführung in die spezifische Verwendung von Schlüsseln in React (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!