So verwenden Sie Reaktionsschlüssel, um Komponentenkonflikte zu vermeiden

Der React-Ansatz kann recht kompliziert sein und es kann zu unerwartetem Verhalten oder sogar subtilen Fehlern kommen. Solche Fehler zu beseitigen kann ziemlich schwierig sein, wenn Sie mit der Ursache nicht vertraut sind.

Ein besonderer Fehler tritt auf, wenn Sie dieselbe Komponente bedingt mit unterschiedlichen Eigenschaften rendern. Untersuchen Sie diesen Fehler im Detail und finden Sie heraus, wie Sie ihn mithilfe von React-Tasten beheben können.

Reaktionskomponenten sind nicht immer unabhängig

Die einfache Syntax ist einer der Hauptgründe Sie sollten Reagieren lernen. Doch trotz vieler Vorteile ist das Framework nicht frei von Fehlern.

Der Fehler, den Sie hier erfahren, tritt auf, wenn Sie dieselbe Komponente bedingt rendern, ihr aber unterschiedliche Requisiten übergeben.

In solchen Fällen geht React davon aus, dass die beiden Komponenten gleich sind, sodass es sich nicht die Mühe macht, die zweite Komponente zu rendern. Daher bleibt jeder Zustand, den Sie in der ersten Komponente definieren, zwischen den Renderings bestehen.

Nehmen Sie zur Veranschaulichung dieses Beispiel. Zunächst haben Sie Folgendes Schalter Komponente:

import { useState, useEffect } from"react"
exportfunctionCounter({name}) {
const [count, setCount] = useState(0)
return(


{name}</div>
 setCount(c => c - 1)}> - </button>


 setCount(c => c + 1)}> + </button>
 </div>
 )
}

Das Schalter Komponente akzeptiert a Name vom übergeordneten Element über die Objektdestrukturierung, was eine Möglichkeit ist Verwenden Sie Requisiten in React. Dann wird der Name in a gerendert. Außerdem werden zwei Schaltflächen zurückgegeben: eine zum Dekrementieren zählen im Zustand und der andere, um ihn zu erhöhen.

Denken Sie daran, dass an dem obigen Code nichts falsch ist. Der Fehler stammt aus dem folgenden Codeblock (der App-Komponente), der den Zähler verwendet:

import { useState } from"react"
import { Counter } from"./Counter"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return(


 { isKingsley? <Countername="Kingsley" />: <Countername="Sally" /> }


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

Standardmäßig rendert der obige Code den Zähler mit dem Namen Kingsley. Wenn Sie den Zähler auf fünf erhöhen und auf klicken Tauschen klicken, wird der zweite Zähler mit dem Namen „Sally“ gerendert.

Das Problem besteht jedoch darin, dass der Zähler nach dem Austausch nicht auf den Standardzustand Null zurückgesetzt wird.

Dieser Fehler tritt auf, weil beide Zustände dieselben Elemente in derselben Reihenfolge rendern. React weiß nicht, dass sich der „Kingsley“-Zähler vom „Sally“-Zähler unterscheidet. Der einzige Unterschied besteht in der Name prop, aber leider verwendet React dies nicht, um Elemente zu unterscheiden.

Sie können dieses Problem auf zwei Arten umgehen. Die erste besteht darin, Ihr DOM zu ändern und die beiden Bäume unterschiedlich zu gestalten. Dafür ist es erforderlich, dass Sie es verstehen was das DOM ist. Sie können beispielsweise den ersten Zähler in a einschließen Element und das zweite in a Element:

import { useState } from"react"
import { Counter } from"./Counter"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return (


 { isKingsley? 
 (<div>
"Kingsley" /> 
 </div>)
: 
 (<section>
"Sally" /> 
 </section>)
 }


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

Wenn Sie den „Kingsley“-Zähler erhöhen und klicken Tauschen, der Zustand wird auf 0 zurückgesetzt. Dies liegt wiederum daran, dass die Struktur der beiden DOM-Bäume unterschiedlich ist.

Wenn das istKingsley Variable ist WAHR, die Struktur wird sein div >div > Schalter (ein Div, das ein Div enthält, das einen Zähler enthält). Wenn Sie den Zählerstatus mit der Schaltfläche austauschen, wird die Struktur div > Abschnitt > Schalter. Aufgrund dieser Diskrepanz rendert React automatisch einen neuen Zähler mit einem zurückgesetzten Status.

Möglicherweise möchten Sie die Struktur Ihres Markups nicht immer auf diese Weise ändern. Die zweite Möglichkeit zur Behebung dieses Fehlers vermeidet die Notwendigkeit eines anderen Markups.

Verwenden von Schlüsseln zum Rendern einer neuen Komponente

Mithilfe von Schlüsseln kann React während des Rendervorgangs zwischen Elementen unterscheiden. Wenn Sie also zwei Elemente haben, die genau gleich sind, und Sie React signalisieren möchten, dass sich eines vom anderen unterscheidet, müssen Sie für jedes Element ein eindeutiges Schlüsselattribut festlegen.

Fügen Sie jedem Zähler einen Schlüssel hinzu, etwa so:

import { useState } from"react"
import { Counter } from"./Counter"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return(


 { isKingsley? 
"Kingsley" name="Kingsley" />: 
"Sally" name="Sally" /> 
 }


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

Wenn Sie nun den „Kingsley“-Zähler erhöhen und klicken Tauschen, React rendert einen neuen Zähler und setzt den Status auf Null zurück.

Sie sollten auch Schlüssel verwenden, wenn Sie ein Array von Elementen desselben Typs rendern, da React den Unterschied zwischen den einzelnen Elementen nicht kennt.

exportdefaultfunctionApp() {
const names = ["Kingsley", "John", "Ahmed"]
return(


 { names.map((name, index) => {
return<Counterkey={index}name={name} />
 })}
 </div>
 )
}

Wenn Sie Schlüssel zuweisen, ordnet React jedem Element einen separaten Zähler zu. Auf diese Weise kann es alle Änderungen widerspiegeln, die Sie am Array vornehmen.

Ein weiterer Anwendungsfall für fortgeschrittene Schlüssel

Sie können Schlüssel auch verwenden, um ein Element einem anderen Element zuzuordnen. Beispielsweise möchten Sie möglicherweise ein Eingabeelement abhängig vom Wert einer Statusvariablen mit verschiedenen Elementen verknüpfen.

Optimieren Sie zur Demonstration die App-Komponente:

import { useState } from"react"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return(


 { isKingsley? <div>Kingsley's Scorediv>: <div>Sally's scorediv> }
"Kingsley": "Sally" } type="number"/>


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

Jetzt jedes Mal, wenn Sie zwischen den wechseln Elemente für Kingsley und Sally ändern Sie automatisch das Schlüsselattribut Ihrer Eingabe zwischen „Kingsley“ und „Sally“. Dadurch wird React gezwungen, das Eingabeelement bei jedem Klick auf die Schaltfläche vollständig neu zu rendern.

Weitere Tipps zur Optimierung von React-Anwendungen

Codeoptimierung ist der Schlüssel zur Schaffung eines angenehmen Benutzererlebnisses in Ihrer Web- oder mobilen App. Wenn Sie verschiedene Optimierungstechniken kennen, können Sie Ihre React-Anwendungen optimal nutzen.

Das Beste daran ist, dass Sie die meisten dieser Optimierungstechniken auch mit React Native-Anwendungen anwenden können.