Reageersleutels gebruiken om componentconflicten te voorkomen

De React-aanpak kan behoorlijk gecompliceerd zijn en u kunt onverwacht gedrag of zelfs subtiele bugs tegenkomen. Het kan behoorlijk moeilijk zijn om van dergelijke bugs af te komen als u niet bekend bent met de oorzaak ervan.

Een bepaalde bug doet zich voor wanneer u dezelfde component voorwaardelijk weergeeft met verschillende eigenschappen. Onderzoek deze bug in detail en ontdek hoe je React-toetsen kunt gebruiken om het op te lossen.

React-componenten zijn niet altijd onafhankelijk

De eenvoudige syntaxis is een van de belangrijkste redenen je zou Reageren moeten leren. Maar ondanks de vele voordelen is het framework niet zonder bugs.

De bug die je hier leert, doet zich voor wanneer je voorwaardelijk dezelfde component rendert, maar verschillende rekwisieten doorgeeft.

In dergelijke gevallen gaat React ervan uit dat de twee componenten hetzelfde zijn, dus zal het niet de moeite nemen om de tweede component weer te geven. Het resultaat is dat elke status die u in de eerste component definieert, blijft bestaan ​​tussen weergaven.

Neem dit voorbeeld om dit te demonstreren. Ten eerste heb je het volgende Balie bestanddeel:

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>
 )
}

Dit Balie onderdeel accepteert een naam van de ouder via objectvernietiging, wat een manier is om gebruik rekwisieten in React. Vervolgens wordt de naam weergegeven in a. Het retourneert ook twee knoppen: één om de waarde te verlagen graaf in staat en de andere om het te verhogen.

Houd er rekening mee dat er niets mis is met de bovenstaande code. De bug komt uit het volgende codeblok (de App-component), dat de teller gebruikt:

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>
 )
}

De bovenstaande code geeft standaard de teller met de naam Kingsley weer. Als u de teller op vijf zet en op de knop klikt Ruil knop, wordt de tweede teller met de naam Sally weergegeven.

Maar het probleem is dat de teller niet wordt gereset naar de standaardwaarde van nul nadat u ze hebt verwisseld.

Deze bug treedt op omdat beide toestanden dezelfde elementen in dezelfde volgorde weergeven. React weet niet dat de "Kingsley"-teller anders is dan de "Sally"-teller. Het enige verschil zit hem in de naam prop, maar helaas gebruikt React dat niet om elementen te onderscheiden.

U kunt dit probleem op twee manieren omzeilen. De eerste is door je DOM te veranderen en de twee bomen anders te maken. Dit vereist dat je het begrijpt wat de DOM is. U kunt bijvoorbeeld de eerste teller in een wikkel wikkelen element en de tweede binnen 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>
 )
}

Als u de "Kingsley" -teller verhoogt en klikt Ruil, wordt de status teruggezet naar 0. Nogmaals, dit gebeurt omdat de structuur van de twee DOM-bomen anders is.

Wanneer de is Kingsley variabele is WAAR, zal de structuur zijn div >div > Balie (een div die een div bevat, die een teller bevat). Wanneer u de tellerstatus verwisselt met de knop, wordt de structuur div > sectie > Balie. Vanwege deze discrepantie zal React automatisch een nieuwe teller weergeven met een resetstatus.

Misschien wilt u de structuur van uw opmaak niet altijd op deze manier wijzigen. De tweede manier om deze bug op te lossen, vermijdt de noodzaak voor verschillende markeringen.

Sleutels gebruiken om een ​​nieuwe component weer te geven

Met sleutels kan React onderscheid maken tussen elementen tijdens het weergaveproces. Dus als je twee elementen hebt die exact hetzelfde zijn, en je wilt aan React doorgeven dat het ene verschilt van het andere, dan moet je voor elk element een uniek sleutelattribuut instellen.

Voeg een sleutel toe aan elke teller, zoals deze:

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>
 )
}

Nu, wanneer u de "Kingsley" -teller verhoogt en klikt Ruil, geeft React een nieuwe teller weer en zet de status op nul.

U moet ook sleutels gebruiken wanneer u een reeks items van hetzelfde type weergeeft, aangezien React het verschil tussen elk item niet weet.

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


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

Wanneer u sleutels toewijst, zal React een afzonderlijke teller aan elk item koppelen. Op die manier kan het alle wijzigingen weergeven die u in de array aanbrengt.

Nog een voorbeeld van geavanceerd sleutelgebruik

U kunt ook toetsen gebruiken om een ​​element aan een ander element te koppelen. U wilt bijvoorbeeld een invoerelement koppelen aan verschillende elementen, afhankelijk van de waarde van een statusvariabele.

Pas de app-component aan om te demonstreren:

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>
 )
}

Nu, elke keer dat u wisselt tussen de elementen voor Kingsley en Sally, verandert u automatisch het sleutelattribuut van uw invoer tussen "Kingsley" en "Sally". Dit dwingt React om het invoerelement volledig opnieuw weer te geven bij elke klik op de knop.

Meer tips voor het optimaliseren van React-applicaties

Code-optimalisatie is de sleutel tot het creëren van een prettige gebruikerservaring in uw web- of mobiele app. Als u op de hoogte bent van verschillende optimalisatietechnieken, kunt u het meeste uit uw React-applicaties halen.

Het beste is dat u de meeste van deze optimalisatietechnieken ook kunt toepassen met React Native-applicaties.