A React gombok használata az alkatrészek ütközésének elkerülésére

A React megközelítés meglehetősen bonyolult lehet, és váratlan viselkedéssel vagy akár finom hibákkal találkozhat. Az ilyen hibáktól való megszabadulás meglehetősen nehéz lehet, ha nem ismeri az okukat.

Egy adott hiba akkor lép fel, ha ugyanazt az összetevőt feltételesen rendereli különböző tulajdonságokkal. Fedezze fel ezt a hibát részletesen, és megtudja, hogyan oldja meg a React billentyűket.

A React összetevői nem mindig függetlenek

Egyszerű szintaxisa az egyik fő ok meg kellene tanulnod a Reactot. De sok előnye ellenére a keret nem mentes a hibáktól.

Az itt megismert hiba akkor fordul elő, ha feltételesen ugyanazt az összetevőt jeleníti meg, de különböző kellékeket ad át neki.

Ilyen esetekben a React azt feltételezi, hogy a két komponens megegyezik, így nem fogja zavarni a második komponens megjelenítését. Ennek eredményeként az első komponensben meghatározott bármely állapot megmarad a megjelenítések között.

Ennek bemutatásához vegyük ezt a példát. Először is a következők vannak Számláló összetevő:

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

Ez Számláló komponens elfogadja a név a szülőtől objektum-destrukción keresztül, ami egy módja annak használjon kellékeket a Reactban. Ezután a nevet adja vissza a. Két gombot is visszaad: az egyiket csökkenti a számol állapotban, a másik pedig növeléséhez.

Ne feledje, hogy a fenti kóddal nincs semmi baj. A hiba a következő kódblokkból (az App komponensből) származik, amely a számlálót használja:

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

Alapértelmezés szerint a fenti kód a számlálót Kingsley néven jeleníti meg. Ha a számlálót ötre növeli, és rákattint a Csere gombot, a második Sally nevű számlálót jeleníti meg.

De a probléma az, hogy a számláló nem áll vissza az alapértelmezett nullára, miután kicserélte őket.

Ez a hiba azért fordul elő, mert mindkét állapot ugyanazokat az elemeket jeleníti meg ugyanabban a sorrendben. A React nem tudja, hogy a "Kingsley" számláló eltér a "Sally" számlálótól. Az egyetlen különbség a név prop, de sajnos a React nem ezt használja az elemek megkülönböztetésére.

Ezt a problémát kétféleképpen kerülheti meg. Az első a DOM megváltoztatása, és a két fa különbözővé tétele. Ehhez meg kell értened mi az a DOM. Például az első számlálót becsomagolhatja a elem, a második pedig a elem:

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

Ha növeli a "Kingsley" számlálót, és kattintson Csere, az állapot visszaáll 0-ra. Ez megint csak azért történik, mert a két DOM-fa szerkezete eltérő.

Amikor az isKingsley változó az igaz, a szerkezet lesz div >div > Számláló (egy div-et tartalmazó div, amely egy számlálót tartalmaz). Ha a gombbal felcseréli a számláló állapotát, a szerkezet div > szakasz > Számláló. Ezen eltérés miatt a React automatikusan új számlálót jelenít meg visszaállítási állapottal.

Előfordulhat, hogy nem mindig szeretné így módosítani a jelölés szerkezetét. A hiba feloldásának második módja elkerüli az eltérő jelölések szükségességét.

Kulcsok használata friss komponens renderelésére

A kulcsok lehetővé teszik a React számára, hogy különbséget tegyen az elemek között a renderelési folyamat során. Tehát ha két eleme teljesen megegyezik, és azt szeretné jelezni a Reactnak, hogy az egyik különbözik a másiktól, akkor minden elemhez egyedi kulcsattribútumot kell beállítania.

Adjon hozzá egy kulcsot minden számlálóhoz, például:

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

Most, amikor növeli a "Kingsley" számlálót, és kattintson Csere, A React új számlálót jelenít meg, és nullára állítja az állapotot.

Akkor is használjon kulcsokat, amikor azonos típusú elemekből álló tömböt jelenít meg, mivel a React nem ismeri az egyes elemek közötti különbséget.

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


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

Amikor kulcsokat rendel hozzá, a React minden elemhez külön számlálót rendel. Így tükrözheti a tömbön végzett bármilyen változtatást.

Egy másik speciális kulcshasználati eset

Kulcsokkal is társíthat egy elemet egy másik elemhez. Például előfordulhat, hogy egy bemeneti elemet különböző elemekkel kíván társítani egy állapotváltozó értékétől függően.

A bemutatáshoz módosítsa az App összetevőt:

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

Most minden alkalommal, amikor váltasz a A Kingsley és Sally elemek esetében automatikusan módosítja a bemeneti kulcsattribútumot „Kingsley” és „Sally” között. Ez arra kényszeríti a Reactot, hogy minden egyes gombnyomással teljesen újra renderelje a bemeneti elemet.

További tippek a React alkalmazások optimalizálásához

A kódoptimalizálás kulcsfontosságú a kellemes felhasználói élmény megteremtéséhez webes vagy mobilalkalmazásában. A különböző optimalizálási technikák ismerete segíthet a legtöbbet kihozni React alkalmazásaiból.

A legjobb az egészben az, hogy a legtöbb ilyen optimalizálási technikát a React Native alkalmazásokkal is alkalmazhatja.