Jak používat klávesy React, abyste se vyhnuli konfliktu součástí

Přístup React může být poměrně komplikovaný a můžete se setkat s neočekávaným chováním nebo dokonce s jemnými chybami. Zbavit se takových chyb může být docela těžké, pokud nejste obeznámeni s jejich příčinou.

Konkrétní chyba nastane, když podmíněně vykreslíte stejnou komponentu s různými vlastnostmi. Prozkoumejte tuto chybu podrobně a zjistěte, jak ji vyřešit pomocí kláves React.

Komponenty React nejsou vždy nezávislé

Jeho přímočará syntaxe je jedním z hlavních důvodů měl by ses naučit React. Ale i přes mnoho výhod není framework bez chyb.

Chyba, o které se zde dozvíte, nastává, když podmíněně renderujete stejnou komponentu, ale předáváte jí různé rekvizity.

V případech, jako je tento, bude React předpokládat, že obě složky jsou stejné, takže se nebude obtěžovat vykreslovat druhou složku. Výsledkem je, že jakýkoli stav, který definujete v první komponentě, přetrvá mezi vykreslením.

Pro demonstraci si vezměte tento příklad. Za prvé, máte následující Čelit 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>
 )
}

Tento Čelit složka přijímá a název od rodiče přes destrukci objektu, což je způsob používat rekvizity v Reactu. Poté vykreslí jméno v a. Také vrací dvě tlačítka: jedno pro snížení počet ve stavu a druhý k jeho zvýšení.

Mějte na paměti, že s výše uvedeným kódem není nic špatného. Chyba pochází z následujícího bloku kódu (součást aplikace), který používá čítač:

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

Ve výchozím nastavení výše uvedený kód vykresluje čítač s názvem Kingsley. Pokud zvýšíte počítadlo na pět a kliknete na Vyměňte tlačítko, vykreslí druhý čítač s názvem Sally.

Problém je ale v tom, že počítadlo se neresetuje do výchozího stavu nula poté, co je vyměníte.

K této chybě dochází, protože oba stavy vykreslují stejné prvky ve stejném pořadí. React neví, že počítadlo "Kingsley" je jiné než počítadlo "Sally". Jediný rozdíl je v název prop, ale React to bohužel nepoužívá k rozlišení prvků.

Tento problém můžete obejít dvěma způsoby. Prvním je změna vašeho DOM a odlišení dvou stromů. To vyžaduje, abyste rozuměli co je DOM. Můžete například zabalit první počítadlo dovnitř a prvek a druhý uvnitř a živel:

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

Pokud zvýšíte počítadlo "Kingsley" a kliknete Vyměňte, stav se resetuje na 0. Opět k tomu dochází, protože struktura dvou stromů DOM je odlišná.

Když je Kingsley proměnná je skutečný, struktura bude div >div > Čelit (div obsahující div, obsahující čítač). Když přepnete stav čítače pomocí tlačítka, struktura se změní div > sekce > Čelit. Kvůli této nesrovnalosti React automaticky vykreslí nový čítač se stavem reset.

Možná nebudete chtít vždy takto měnit strukturu svého označení. Druhý způsob, jak tuto chybu vyřešit, se vyhne potřebě jiného označení.

Použití kláves k vykreslení nové součásti

Klíče umožňují Reactu rozlišovat mezi prvky během procesu vykreslování. Pokud tedy máte dva prvky, které jsou naprosto stejné, a chcete Reactu signalizovat, že se jeden od druhého liší, musíte pro každý prvek nastavit jedinečný atribut klíče.

Přidejte klíč ke každému počítadlu takto:

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

Nyní, když zvýšíte počítadlo "Kingsley" a kliknete Vyměňte, React vykreslí nový čítač a vynuluje stav.

Klíče byste měli používat také při vykreslování pole položek stejného typu, protože React nepozná rozdíl mezi jednotlivými položkami.

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


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

Když přiřadíte klíče, React přiřadí ke každé položce samostatné počítadlo. Tímto způsobem může odrážet jakékoli změny, které v poli provedete.

Další pokročilý případ použití klíče

Pomocí kláves můžete také přiřadit prvek k jinému prvku. Můžete například chtít přiřadit vstupní prvek k různým prvkům v závislosti na hodnotě stavové proměnné.

Chcete-li demonstrovat, vylaďte komponentu aplikace:

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

Nyní, pokaždé, když přepínáte mezi prvků pro Kingsley a Sally, automaticky měníte klíčový atribut svého vstupu mezi „Kingsley“ a „Sally“. To donutí React úplně znovu vykreslit vstupní prvek s každým kliknutím na tlačítko.

Další tipy pro optimalizaci aplikací React

Optimalizace kódu je klíčem k vytvoření příjemného uživatelského zážitku ve vaší webové nebo mobilní aplikaci. Znalost různých optimalizačních technik vám může pomoci vytěžit z vašich aplikací React maximum.

Nejlepší na tom je, že většinu těchto optimalizačních technik můžete použít také s aplikacemi React Native.