Welche Rolle spielt der Schlüsselwert in React und wie wird der Schlüsselwert verwendet? (mit Code)

In diesem Artikel geht es um die Rolle von Schlüsselwerten in React und um die Verwendung von Schlüsselwerten. (Beigefügt ist der Code), der einen gewissen Referenzwert hat. Freunde in Not können sich darauf beziehen. Ich hoffe, er wird für Sie hilfreich sein.

In Reaktionsprojekten werden Sie immer auf eine solche Grube stoßen

Dies ist eine Warnung, dass das Array von untergeordneten Elementen durchlaufen wird erfordert Es gibt einen eindeutigen Schlüsselwert, aber was genau ist der Schlüssel und welche Rolle spielt er im Code?

Schlüsselübersicht

Das Schlüsselattribut in React ist ein spezielles Attribut und sein Aussehen ist nicht für Entwickler bestimmt (z. B. kann der Schlüssel immer noch nicht abgerufen werden, nachdem Sie den Schlüssel für eine Komponente festgelegt haben). Wert dieser Komponente) wird von React selbst verwendet.
Um es einfach auszudrücken: React verwendet einen Schlüssel zur Identifizierung von Komponenten, der ein Identitätsidentifikator ist, 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üsselverwendungsszenarien

In der Projektentwicklung wird das Schlüsselattribut am häufigsten in dynamisch aus Arrays erstellten Unterkomponenten verwendet. Es ist notwendig, jeder Unterkomponente einen eindeutigen Schlüsselattributwert hinzuzufügen. Manche Leute werden natürlich denken, dass der Wert von key sehr nahe an der Indexposition liegt, die durch das dynamisch gerenderte Unterelement erhalten wird. Ist es nicht möglich, den Wert von key={index} direkt anzuhängen?

例如：
{dataList.map((item,index)=>{
        return <p>{item.name}</p>
        })
}

Nachdem Sie es ausprobiert haben, werden Sie feststellen, dass der Fehler verschwunden ist und die Darstellung kein Problem darstellt. ! 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 die Ansichtselemente neu gerendert.

Zum Beispiel:
Nachdem das Element mit Index = 2 verschoben wurde, ändert sich auch der Schlüssel des Elements. Dann hat der Schlüssel, der sich auf diese Weise ändert, keine Existenzbedeutung Wird als „Personalausweis“ verwendet, ist vorhanden, daher gibt es keinen Grund für Fehler. 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.

Der Wert des Schlüssels muss eindeutig und stabil sein

Nachdem ich mich mehrmals mit dem Schlüsselwert beschäftigt habe, habe ich das Gefühl, dass der Schlüsselwert der Primärschlüssel-ID in der Datenbank ähnelt, er ist einzigartig und einzigartig .

//this.state.users内容。注意：李四和王五的id相同！！！
this.state = {
 users: [{id:1,name: '张三'}, {id:2, name: '李四'}, {id: 2, name: "王五"}],
 ....//省略
}
render()
 return(
  <p>
    </p><h3>用户列表</h3>
    {this.state.users.map(u => <p>{u.id}:{u.name}</p>)}
  
 )
);

Beachten Sie, dass im obigen Beispiel in den dynamisch gerenderten Daten der Schlüssel durch die ID der Daten bestimmt wird. Die IDs von Li Si und Wang Wu sind jedoch gleich, was zum Gleichen führt Das endgültige Rendering-Ergebnis ist Zhang San und Li Four, Wang Wu wurde nicht angezeigt. Der Hauptgrund dafür ist, dass React davon ausgeht, dass John IV und Wang Wu basierend auf dem Schlüssel dieselbe Komponente sind (die Schlüsselwerte von John IV und Wang Wu sind gleich), was dazu führt, dass die erste gerendert wird Nachfolgende werden verworfen.

Auf diese Weise kann mit dem Schlüsselattribut eine entsprechende Beziehung zur Komponente hergestellt werden. React entscheidet anhand des Schlüssels, ob die Komponente zerstört, neu erstellt oder aktualisiert wird.

Die Stabilität des Schlüssels muss ebenfalls gewährleistet sein, zum Beispiel:

{dataList.map((item,index)=>{
        return <p>{item.name}</p>
        })
}

Insbesondere wie im obigen Beispiel gezeigt, wird der Wert des Schlüssels durch zufällige Generierung von Math.random(), wodurch jedes Element im Array-Element zerstört und neu erstellt wird, was einen gewissen Leistungsaufwand mit sich bringt und außerdem zu unerwarteten Problemen führen kann.

Daher muss der Wert des Schlüssels seine Einzigartigkeit und Stabilität gewährleisten

Verwandte Empfehlungen:

So lesen Sie den Schlüsselwert in Redis Führt zu

Ausführliche Erklärung zur Verwendung der React Native React-Navigation-Navigation

Das obige ist der detaillierte Inhalt vonWelche Rolle spielt der Schlüsselwert in React und wie wird der Schlüsselwert verwendet? (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!