Slik bruker du React Keys for å unngå komponentkonflikt

React-tilnærmingen kan være ganske komplisert, og du kan støte på uventet oppførsel eller til og med subtile feil. Å bli kvitt slike feil kan være ganske vanskelig hvis du ikke er kjent med årsaken deres.

En spesiell feil oppstår når du betinget gjengir den samme komponenten med forskjellige egenskaper. Utforsk denne feilen i detalj og finn ut hvordan du bruker React-tastene for å løse den.

React-komponenter er ikke alltid uavhengige

Den enkle syntaksen er en av hovedårsakene du bør lære React. Men til tross for mange fordeler, er ikke rammeverket uten feil.

Feilen du vil lære om her oppstår når du betinget gjengir den samme komponenten, men sender den forskjellige rekvisitter.

I tilfeller som dette vil React anta at de to komponentene er like, så den vil ikke bry seg om å gjengi den andre komponenten. Som et resultat vil enhver tilstand du definerer i den første komponenten vedvare mellom gjengivelsene.

For å demonstrere, ta dette eksemplet. Først har du følgende Disk 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>
 )
}

Dette Disk komponent godtar en Navn fra forelderen via objektdestrukturering, som er en måte å bruk rekvisitter i React. Deretter gjengir den navnet i en. Den returnerer også to knapper: en for å redusere telle i tilstand og den andre for å øke den.

Husk at det ikke er noe galt med koden ovenfor. Feilen kommer fra følgende kodeblokk (App-komponenten), som bruker telleren:

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 gjengir koden ovenfor telleren med navnet Kingsley. Hvis du øker telleren til fem og klikker på Bytte knappen, vil den gjengi den andre telleren som heter Sally.

Men problemet er at telleren ikke vil tilbakestilles til standardtilstanden på null etter at du har byttet dem.

Denne feilen oppstår fordi begge tilstander gjengir de samme elementene i samme rekkefølge. React vet ikke at "Kingsley"-telleren er forskjellig fra "Sally"-telleren. Den eneste forskjellen er i Navn prop, men dessverre bruker ikke React det til å skille elementer.

Du kan omgå dette problemet på to måter. Den første er ved å endre opp DOM og gjøre de to trærne forskjellige. Dette krever at du forstår hva DOM er. For eksempel kan du pakke den første disken inn i en element og det andre inne 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 øker "Kingsley"-telleren og klikker Bytte, tilbakestilles tilstanden til 0. Igjen, dette skjer fordi strukturen til de to DOM-trærne er forskjellig.

Når er Kingsley variabel er ekte, vil strukturen være div >div > Disk (en div som inneholder en div, som inneholder en teller). Når du bytter tellertilstand ved å bruke knappen, blir strukturen div > seksjon > Disk. På grunn av dette avviket vil React automatisk gjengi en ny teller med en tilbakestillingstilstand.

Du vil kanskje ikke alltid endre strukturen til markeringen på denne måten. Den andre måten å løse denne feilen på, unngår behovet for annen markering.

Bruke nøkler til å gjengi en fersk komponent

Taster lar React skille mellom elementer under gjengivelsesprosessen. Så hvis du har to elementer som er nøyaktig like, og du vil signalisere til React at det ene er forskjellig fra det andre, må du sette et unikt nøkkelattributt på hvert element.

Legg til en nøkkel til hver teller, slik:

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

Nå, når du øker "Kingsley"-telleren og klikker Bytte, React gjengir en ny teller og tilbakestiller tilstanden til null.

Du bør også bruke nøkler når du gjengir en rekke elementer av samme type, siden React ikke vil vite forskjellen mellom hvert element.

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


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

Når du tildeler nøkler, vil React knytte en separat teller til hvert element. På den måten kan den gjenspeile eventuelle endringer du gjør i matrisen.

En annen avansert nøkkelbrukssak

Du kan også bruke taster til å knytte et element til et annet element. Det kan for eksempel være lurt å knytte et inngangselement til forskjellige elementer avhengig av verdien til en tilstandsvariabel.

For å demonstrere, finjuster 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>
 )
}

Nå, hver gang du bytter mellom elementer for Kingsley og Sally, endrer du automatisk inndataens nøkkelattributt mellom "Kingsley" og "Sally". Dette vil tvinge React til å gjengi inndataelementet på nytt med hvert klikk på knappen.

Flere tips for optimalisering av React-applikasjoner

Kodeoptimalisering er nøkkelen til å skape en hyggelig brukeropplevelse i nett- eller mobilappen din. Å vite om forskjellige optimaliseringsteknikker kan hjelpe deg med å få mest mulig ut av React-applikasjonene dine.

Det beste er at du kan bruke de fleste av disse optimaliseringsteknikkene med React Native-applikasjoner også.