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 ligefremme syntaks er en af hovedårsagerne til, at 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:
importere
{ useState, useEffect } fra “reagere”
eksportere fungere Tæller({navn}) {
konst [count, setCount] = useState(0)
returnere(
)
}
Denne Tæller komponent accepterer en navn fra forælderen via objektdestrukturering, som er en måde at bruge rekvisitter på i React. Så gengiver den navnet i en
Husk, at der ikke er noget galt med ovenstående kode. Fejlen kommer fra følgende kodeblok (App-komponenten), som bruger tælleren:
importere
{ useState } fra “reagere”
importere { Tæller } fra “./Tæller”
eksportere misligholdelse fungere App() {
konst [isKingsley, setIsKingsley] = useState(sand)
returnere(
)
}
Som standard gengiver ovenstående kode tælleren med navnet Kingsley. Hvis du øger tælleren til fem og klikker på Byt 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
importere
{ useState } fra “reagere”
importere { Tæller } fra “./Tæller”
eksportere misligholdelse fungere App() {
konst [isKingsley, setIsKingsley] = useState(sand)
returnere (
(<div>
)
:
(<afsnit>
)
}
)
}
Hvis du øger “Kingsley”-tælleren og klikker Bytnulstilles tilstanden til 0. Igen sker dette, fordi strukturen af de to DOM-træer er forskellig.
Når er Kingsley variabel er ægtevil strukturen være div > div > Tæller (en div indeholdende en div, indeholdende 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 ønsker måske ikke altid at æ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:
importere
{ useState } fra “reagere”
importere { Tæller } fra “./Tæller”
eksportere misligholdelse fungere App() {
konst [isKingsley, setIsKingsley] = useState(sand)
returnere(
}
)
}
Nu, når du øger “Kingsley”-tælleren og klikker BytReact 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.
eksportere
misligholdelse fungere App() {
konst navne = [“Kingsley”, “John”, “Ahmed”]
returnere(
returnere <Tæller key={indeks} navn={navn} />
})}
)
}
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:
importere
{ useState } fra “reagere”
eksportere misligholdelse fungere App() {
konst [isKingsley, setIsKingsley] = useState(sand)
returnere(
)
}
Nu, hver gang du skifter mellem
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.
FAQ
Q: Hvad er React Native?
React Native udvider React for at give en ramme til udvikling af apps på tværs af platforme. Det kan reducere den samlede udviklingstid drastisk.
Spørgsmål: Skal jeg altid sikre, at mine komponenter er 100 % isolerede?
Reacts komponentsystem hjælper med at indkapsle data, men du bliver nogle gange nødt til at omgå det. Løftetilstand er én tilgang, men det kan føre til propboring, hvilket har ulemper.
Q: Hvordan kan jeg bruge rekvisitter til at skabe en fleksibel komponent?
Du kan følge trinene for at oprette et eksempel på React-meddelelseskomponent, der bruger rekvisitter til tilpasning.
Støt vores arbejde ❤️
Hvis du kunne lide denne artikel, kan du overveje at give drikkepenge for at hjælpe os med fortsat at udgive kvalitetsindhold.
