React-metoden kan vara ganska komplicerad, och du kan stöta på oväntat beteende eller till och med subtila buggar. Att bli av med sådana buggar kan vara ganska svårt om du inte är bekant med deras orsak.
En speciell bugg uppstår när du villkorligt renderar samma komponent med olika egenskaper. Utforska denna bugg i detalj och ta reda på hur du använder React-nycklar för att lösa det.
React-komponenter är inte alltid oberoende
Dess enkla syntax är en av de främsta anledningarna till att du bör lära dig React. Men trots många fördelar är ramverket inte utan buggar.
Felet du kommer att lära dig om här uppstår när du villkorligt renderar samma komponent, men skickar olika rekvisita till den.
I sådana här fall kommer React att anta att de två komponenterna är desamma, så det kommer inte att bry sig om att rendera den andra komponenten. Som ett resultat kommer alla tillstånd du definierar i den första komponenten att bestå mellan renderingarna.
För att demonstrera, ta det här exemplet. Först har du följande Disk komponent:
importera
{ useState, useEffect } från ”reagera”
exportera fungera Disk({name}) {
konst [count, setCount] = useState(0)
återvända(
)
}
Detta Disk komponent accepterar en namn från föräldern via objektdestrukturering, vilket är ett sätt att använda rekvisita i React. Sedan återger den namnet i en
Tänk på att det inte är något fel på ovanstående kod. Felet kommer från följande kodblock (App-komponenten), som använder räknaren:
importera
{ useState } från ”reagera”
importera { Räknare } från ”./Disk”
exportera standard fungera App() {
konst [isKingsley, setIsKingsley] = useState(true)
återvända(
)
}
Som standard återger koden ovan räknaren med namnet Kingsley. Om du ökar räknaren till fem och klickar på Byta knappen, kommer den att återge den andra räknaren som heter Sally.
Men problemet är att räknaren inte återställs till standardläget noll efter att du har bytt dem.
Denna bugg uppstår eftersom båda tillstånden återger samma element i samma ordning. React vet inte att ”Kingsley”-räknaren skiljer sig från ”Sally”-räknaren. Den enda skillnaden är i namn prop men tyvärr använder React inte det för att skilja element åt.
Du kan komma runt detta problem på två sätt. Den första är genom att ändra din DOM och göra de två träden olika. Detta kräver att du förstår vad DOM är. Du kan till exempel slå in den första disken inuti en
importera
{ useState } från ”reagera”
importera { Räknare } från ”./Disk”
exportera standard fungera App() {
konst [isKingsley, setIsKingsley] = useState(true)
återvända (
(<div>
)
:
(<avsnitt>
)
}
)
}
Om du ökar ”Kingsley”-räknaren och klickar Bytaåterställs tillståndet till 0. Återigen händer detta eftersom strukturen för de två DOM-träden är olika.
När är Kingsley variabel är sannkommer strukturen att vara div > div > Disk (en div som innehåller en div, som innehåller en räknare). När du byter räknarläge med knappen blir strukturen div > avsnitt > Disk. På grund av denna diskrepans kommer React automatiskt att återge en ny räknare med ett återställningstillstånd.
Du kanske inte alltid vill ändra strukturen för din markering så här. Det andra sättet att lösa denna bugg undviker behovet av annan uppmärkning.
Använda nycklar för att rendera en ny komponent
Nycklar gör att React kan skilja mellan element under renderingsprocessen. Så om du har två element som är exakt likadana, och du vill signalera till React att det ena skiljer sig från det andra, måste du ställa in ett unikt nyckelattribut för varje element.
Lägg till en nyckel till varje räknare, så här:
importera
{ useState } från ”reagera”
importera { Räknare } från ”./Disk”
exportera standard fungera App() {
konst [isKingsley, setIsKingsley] = useState(true)
återvända(
}
)
}
Nu, när du ökar ”Kingsley”-räknaren och klickar BytaReact återger en ny räknare och nollställer tillståndet.
Du bör också använda nycklar när du renderar en rad objekt av samma typ, eftersom React inte vet skillnaden mellan varje objekt.
exportera
standard fungera App() {
konst namn = [”Kingsley”, ”John”, ”Ahmed”]
återvända(
återvända <Disk key={index} name={name} />
})}
)
}
När du tilldelar nycklar kommer React att associera en separat räknare till varje objekt. På så sätt kan den återspegla alla ändringar du gör i arrayen.
Ytterligare ett fall för avancerad nyckelanvändning
Du kan också använda nycklar för att associera ett element med ett annat element. Till exempel kanske du vill associera ett indataelement med olika element beroende på värdet på en tillståndsvariabel.
För att demonstrera, justera appkomponenten:
importera
{ useState } från ”reagera”
exportera standard fungera App() {
konst [isKingsley, setIsKingsley] = useState(true)
återvända(
)
}
Nu, varje gång du byter mellan
Fler tips för att optimera React-applikationer
Kodoptimering är nyckeln till att skapa en trevlig användarupplevelse i din webb- eller mobilapp. Att känna till olika optimeringstekniker kan hjälpa dig att få ut det mesta av dina React-applikationer.
Det bästa är att du kan tillämpa de flesta av dessa optimeringstekniker med React Native-applikationer också.
FAQ
F: Vad är React Native?
React Native utökar React för att tillhandahålla ett ramverk för att utveckla plattformsoberoende appar. Det kan drastiskt minska den totala utvecklingstiden.
F: Ska jag alltid se till att mina komponenter är 100 % isolerade?
Reacts komponentsystem hjälper till att kapsla in data, men du kommer ibland att behöva kringgå det. Lyfttillstånd är ett tillvägagångssätt, men det kan leda till propellborrning, vilket har nackdelar.
F: Hur kan jag använda rekvisita för att skapa en flexibel komponent?
Du kan följa stegen för att skapa ett exempel på React-aviseringskomponent som använder rekvisita för anpassning.
Stöd vårt arbete ❤️
Om du gillade den här artikeln, överväg att lämna dricks för att hjälpa oss fortsätta publicera bra innehåll.
