Ako používať klávesy React, aby ste sa vyhli konfliktom komponentov

Prístup React môže byť dosť komplikovaný a môžete sa stretnúť s neočakávaným správaním alebo dokonca s jemnými chybami. Zbaviť sa takýchto chýb môže byť dosť ťažké, ak nepoznáte ich príčinu.

Konkrétna chyba vzniká, keď podmienečne vykresľujete rovnaký komponent s rôznymi vlastnosťami. Preskúmajte túto chybu podrobne a zistite, ako ju vyriešiť pomocou kláves React.

Komponenty React nie sú vždy nezávislé

Jeho priamočiara syntax je jedným z hlavných dôvodov mal by si sa naucit React. Napriek mnohým výhodám však rámec nie je bez chýb.

Chyba, o ktorej sa tu dozviete, sa vyskytuje, keď podmienečne vykresľujete rovnaký komponent, ale odovzdávate mu rôzne rekvizity.

V prípadoch, ako je tento, bude React predpokladať, že tieto dva komponenty sú rovnaké, takže sa nebude obťažovať vykresľovaním druhého komponentu. Výsledkom je, že akýkoľvek stav, ktorý definujete v prvom komponente, bude pretrvávať medzi rendermi.

Na demonštráciu si vezmite tento príklad. Najprv máte nasledovné Počítadlo 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>
 )
}

Toto Počítadlo komponent akceptuje a názov od rodiča cez deštrukciu objektu, čo je cesta k použite rekvizity v Reacte. Potom vykreslí názov v a. Tiež vráti dve tlačidlá: jedno na zníženie počítať v stave a druhý na jeho zvýšenie.

Majte na pamäti, že s vyššie uvedeným kódom nie je nič zlé. Chyba pochádza z nasledujúceho bloku kódu (komponent App), ktorý používa počítadlo:

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

V predvolenom nastavení vyššie uvedený kód vykresľuje počítadlo s názvom Kingsley. Ak zvýšite počítadlo na päť a kliknite na Vymeňte tlačidlo, vykreslí druhé počítadlo s názvom Sally.

Problém je však v tom, že počítadlo sa po výmene neresetuje na svoj predvolený stav nula.

Táto chyba sa vyskytuje, pretože oba stavy vykresľujú rovnaké prvky v rovnakom poradí. React nevie, že počítadlo „Kingsley“ je iné ako počítadlo „Sally“. Jediný rozdiel je v názov prop, ale, žiaľ, React to nepoužíva na odlíšenie prvkov.

Tento problém môžete obísť dvoma spôsobmi. Prvým je zmena vášho DOM a odlíšenie dvoch stromov. To si vyžaduje, aby ste pochopili čo je DOM. Môžete napríklad zabaliť prvé počítadlo dovnútra a prvok a druhý vo vnútri a 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>
 )
}

Ak zvýšite počítadlo "Kingsley" a kliknite Vymeňte, stav sa nastaví na 0. Opäť sa to stane, pretože štruktúra dvoch stromov DOM je odlišná.

Keď je Kingsley premenná je pravda, štruktúra bude div >div > Počítadlo (div obsahujúci div, obsahujúci počítadlo). Keď zmeníte stav počítadla pomocou tlačidla, štruktúra sa zmení na div > oddiele > Počítadlo. Kvôli tejto nezrovnalosti React automaticky vykreslí nové počítadlo s resetovaným stavom.

Možno nie vždy budete chcieť takto zmeniť štruktúru svojho označenia. Druhý spôsob riešenia tejto chyby zabraňuje potrebe rôznych značiek.

Použitie klávesov na vykreslenie nového komponentu

Klávesy umožňujú Reactu rozlišovať medzi prvkami počas procesu vykresľovania. Ak teda máte dva prvky, ktoré sú úplne rovnaké, a chcete Reactu signalizovať, že jeden sa od druhého líši, musíte pre každý prvok nastaviť jedinečný kľúčový atribút.

Ku každému počítadlu pridajte kľúč, ako je tento:

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

Teraz, keď zvýšite počítadlo "Kingsley" a kliknite Vymeňte, React vykreslí nové počítadlo a vynuluje stav.

Klávesy by ste mali použiť aj pri vykresľovaní poľa položiek rovnakého typu, pretože React nepozná rozdiel medzi jednotlivými položkami.

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


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

Keď priradíte kľúče, React priradí ku každej položke samostatné počítadlo. Týmto spôsobom môže odrážať všetky zmeny, ktoré vykonáte v poli.

Ďalší pokročilý prípad použitia kľúča

Na priradenie prvku k inému prvku môžete použiť aj klávesy. Môžete napríklad chcieť priradiť vstupný prvok k rôznym prvkom v závislosti od hodnoty stavovej premennej.

Ak chcete demonštrovať, vylaďte komponent aplikácie:

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

Teraz, zakaždým, keď prepínate medzi prvkov pre Kingsley a Sally, automaticky meníte kľúčový atribút vášho vstupu medzi „Kingsley“ a „Sally“. To prinúti React úplne znova vykresliť vstupný prvok pri každom kliknutí na tlačidlo.

Ďalšie tipy na optimalizáciu aplikácií React

Optimalizácia kódu je kľúčom k vytvoreniu príjemného používateľského zážitku vo vašej webovej alebo mobilnej aplikácii. Poznanie rôznych optimalizačných techník vám môže pomôcť vyťažiť maximum z vašich aplikácií React.

Najlepšie na tom je, že väčšinu týchto optimalizačných techník môžete použiť aj s aplikáciami React Native.