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ů, proč byste se měli 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:
importovat
{ useState, useEffect } z „reagovat“
vývozní funkce Čelit({name}) {
konst [count, setCount] = useState(0)
návrat(
)
}
Tento Čelit složka přijímá a jméno od rodiče přes destrukci objektu, což je způsob, jak používat rekvizity v Reactu. Poté vykreslí jméno v a
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č:
importovat
{ useState } z „reagovat“
importovat { Counter } z „./Čelit“
vývozní výchozí funkce App() {
konst [isKingsley, setIsKingsley] = useState(true)
návrat(
)
}
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 žeton „Kingsley“ se liší od žetonu „Sally“. Jediný rozdíl je v jméno 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 pochopili, co je DOM. Můžete například zabalit první počítadlo dovnitř a
importovat
{ useState } z „reagovat“
importovat { Counter } z „./Čelit“
vývozní výchozí funkce App() {
konst [isKingsley, setIsKingsley] = useState(true)
návrat (
(<div>
)
:
(<sekce>
)
}
)
}
Pokud zvýšíte počítadlo „Kingsley“ a kliknete Vyměňtestav se nastaví na 0. Opět se to stane, protože struktura dvou stromů DOM je odlišná.
Když je Kingsley proměnná je věrnýstruktura bude div > div > Čelit (div obsahující div, obsahující počítadlo). Když přehodíte 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ý klíčový atribut.
Přidejte klíč ke každému počítadlu takto:
importovat
{ useState } z „reagovat“
importovat { Counter } z „./Čelit“
vývozní výchozí funkce App() {
konst [isKingsley, setIsKingsley] = useState(true)
návrat(
}
)
}
Nyní, když zvýšíte počítadlo „Kingsley“ a kliknete VyměňteReact vykreslí nový čítač a vynuluje stav.
Klíče byste měli používat také při renderování pole položek stejného typu, protože React nepozná rozdíl mezi jednotlivými položkami.
vývozní
výchozí funkce App() {
konst jména = [„Kingsley“, „John“, „Ahmed“]
návrat(
návrat <Čelit key={index} name={name} />
})}
)
}
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:
importovat
{ useState } z „reagovat“
vývozní výchozí funkce App() {
konst [isKingsley, setIsKingsley] = useState(true)
návrat(
)
}
Nyní, pokaždé, když přepínáte mezi
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.
FAQ
Otázka: Co je React Native?
React Native rozšiřuje React a poskytuje rámec pro vývoj aplikací pro různé platformy. Může výrazně zkrátit celkovou dobu vývoje.
Otázka: Měl bych vždy zajistit, aby mé komponenty byly 100% izolované?
Systém komponent Reactu pomáhá zapouzdřit data, ale někdy je budete muset obejít. Stav zvedání je jeden přístup, ale může vést k podpěrnému vrtání, které má své nevýhody.
Otázka: Jak mohu použít rekvizity k vytvoření flexibilní součásti?
Podle pokynů můžete vytvořit ukázkovou komponentu oznámení React, která používá rekvizity pro přizpůsobení.
Podpořte naši práci ❤️
Pokud se vám tento článek líbil, zvažte zaslání spropitného, abychom mohli i nadále vydávat kvalitní obsah.
