Sådan bruger du React Keys til at undgå komponentkonflikt

React-tilgangen kan være ret kompliceret, og du kan støde på uventet adfærd eller endda subtile fejl. At slippe af med sådanne fejl kan være ret svært, hvis du ikke er bekendt med deres årsag.

En bestemt fejl opstår, når du betinget gengiver den samme komponent med forskellige egenskaber. Udforsk denne fejl i detaljer og find ud af, hvordan du bruger React-nøgler til at løse den.

React-komponenter er ikke altid uafhængige

Dens ligetil syntaks er en af ​​hovedårsagerne du bør lære React. Men på trods af mange fordele er rammen ikke uden fejl.

Den fejl, du vil lære om her, opstår, når du betinget gengiver den samme komponent, men giver den forskellige rekvisitter.

I tilfælde som dette vil React antage, at de to komponenter er ens, så den vil ikke genere at gengive den anden komponent. Som et resultat vil enhver tilstand, du definerer i den første komponent, bestå mellem gengivelserne.

For at demonstrere, tag dette eksempel. Først har du følgende Tæller komponent:

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

Det her Tæller komponent accepterer en navn fra forælderen via objektdestrukturering, som er en måde at brug rekvisitter i React. Så gengiver den navnet i en. Den returnerer også to knapper: en til at formindske tælle i tilstand og den anden for at øge den.

Husk, at der ikke er noget galt med ovenstående kode. Fejlen kommer fra følgende kodeblok (App-komponenten), som bruger tælleren:

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

Som standard gengiver ovenstående kode tælleren med navnet Kingsley. Hvis du øger tælleren til fem og klikker på Bytte rundt knappen, vil den gengive den anden tæller ved navn Sally.

Men problemet er, at tælleren ikke vil nulstilles til standardtilstanden nul, efter du har byttet dem.

Denne fejl opstår, fordi begge tilstande gengiver de samme elementer i samme rækkefølge. React ved ikke, at "Kingsley"-tælleren er forskellig fra "Sally"-tælleren. Den eneste forskel er i navn prop, men desværre bruger React det ikke til at differentiere elementer.

Du kan omgå dette problem på to måder. Den første er ved at ændre din DOM og gøre de to træer forskellige. Dette kræver, at du forstår hvad DOM er. For eksempel kan du pakke den første disk ind i en element og det andet inde i en 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>
 )
}

Hvis du øger "Kingsley"-tælleren og klikker Bytte rundt, nulstilles tilstanden til 0. Igen sker dette, fordi strukturen af ​​de to DOM-træer er forskellig.

Når er Kingsley variabel er rigtigt, vil strukturen være div >div > Tæller (en div, der indeholder en div, der indeholder en tæller). Når du skifter tællertilstand ved hjælp af knappen, bliver strukturen div > afsnit > Tæller. På grund af denne uoverensstemmelse vil React automatisk gengive en ny tæller med en nulstillingstilstand.

Du vil måske ikke altid ændre strukturen af ​​din markup på denne måde. Den anden måde at løse denne fejl på undgår behovet for forskellige markeringer.

Brug af nøgler til at gengive en frisk komponent

Taster giver React mulighed for at skelne mellem elementer under gengivelsesprocessen. Så hvis du har to elementer, der er nøjagtigt ens, og du vil signalere til React, at det ene er forskelligt fra det andet, skal du indstille en unik nøgleattribut på hvert element.

Tilføj en nøgle til hver tæller, sådan her:

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, når du øger "Kingsley"-tælleren og klikker Bytte rundt, React gengiver en ny tæller og nulstiller tilstanden.

Du bør også bruge nøgler, når du gengiver en række elementer af samme type, da React ikke kender forskellen mellem hvert element.

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


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

Når du tildeler nøgler, vil React knytte en separat tæller til hvert element. På den måde kan den afspejle eventuelle ændringer, du foretager i arrayet.

Endnu en avanceret nøglebrugssag

Du kan også bruge nøgler til at knytte et element til et andet element. For eksempel vil du måske knytte et inputelement til forskellige elementer afhængigt af værdien af ​​en tilstandsvariabel.

For at demonstrere skal du justere app-komponenten:

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, hver gang du skifter mellem elementer for Kingsley og Sally, ændrer du automatisk dit inputs nøgleegenskab mellem "Kingsley" og "Sally". Dette vil tvinge React til fuldstændigt at gengive input-elementet med hvert klik på knappen.

Flere tips til optimering af React-applikationer

Kodeoptimering er nøglen til at skabe en behagelig brugeroplevelse i din web- eller mobilapp. At kende til forskellige optimeringsteknikker kan hjælpe dig med at få mest muligt ud af dine React-applikationer.

Det bedste er, at du også kan anvende de fleste af disse optimeringsteknikker med React Native-applikationer.