Edytujesz Redux v Reactu: přehnané překreslování ničí výkon

<br>Nakonec měřte. Nástroje pro sledování překreslování odhalí, která komponenta se aktualizuje příliš často, a profiler ukáže, kolik času spotřebují selektory. Teprve na základě těchto čísel se vyplatí řešit optimalizace. Bez měření se snadno stane, že přidáte memoizaci tam, kde nic nezpomaluje, a skutečné úzké hrdlo zůstane skryté.<br><br>Posledním návykem je měřit a porovnávat. Jeden dotaz otestujte na vzorku dat, který odpovídá produkci. Malá testovací tabulka může vypadat rychle, ale na milionu řádků se chybějící index projeví až po nasazení. Sledujte dobu odezvy, počet čtených řádků a plán provedení. Teprve pak má smysl měnit dotaz nebo přidávat index. Bez měření jde jen o hádání.<br><br>Typická chyba je, že vývojáři vytvoří příliš věrnou kopii služby. Tráví hodiny implementací okrajových případů, které aplikace nikdy nepoužije. Další častou chybou je, že se fake chová jinak než realita – například vrací data v jiném formátu nebo neposílá hlavičky. Testy pak projdou, ale v produkci to spadne. Vždy si ověřte, že váš fake odpovídá skutečnému kontraktu,  [http://Crativ.Co.kr/bbs/board.php?bo_table=info1&wr_id=140413 dokončení interiéru] alespoň v tom, co aplikace konzumuje.<br><br> Kdy je jednodušší stub než celá atra<br><br>Spread a rest operátor (...) se plete hlavně začátečníkům. Spread kopíruje prvky do nového pole nebo objektu, rest sbírá zbytek do proměnné. U objektů platí, že spread dělá jen mělkou kopii — vnořený objekt zůstává sdílený. Kdo potřebuje hlubokou kopii, musí použít strukturované kopírování nebo knihovnu; jinak se změna v kopii projeví i v originálu.<br><br>Základem je rozdělit stav na serverový, globální a lokální. Data z API, která se cachují a sdílejí mezi obrazovkami, patří do Reduxu. Přepínač otevřeného dialogu, hodnota rozepsaného formuláře nebo index aktivní záložky zůstávají v komponentě přes useState. Pokud tato hranice není jasná, store se nafoukne a každá drobnost spouští rerender celého stromu.<br><br>Přerušovače a krokování odhalí víc než hromada výpisů Jakmile tušíš, která část kódu selhává, přepni na záložku Sources a najdi příslušný soubor. Kliknutím na číslo řádku nastavíš breakpoint – prohlížeč se v tom místě zastaví a ty můžeš krok za krokem sledovat, co se děje. Tlačítky pro krokování (Step over, Step into, Step out) se pohybuješ kódem a v panelu Scope vidíš aktuální hodnoty všech proměnných. To je mnohem přesnější než hádat, co se pokazilo. Pokud se zastavíš uvnitř minifikovaného kódu, použij tlačítko pro zformátování (Pretty print), které ho rozbalí do čitelné podoby.<br><br>Do kódu vkládej výpisy pomocí console.log, ale dělej to cíleně. Místo abys zaplavil konzoli stovkami řádků, loguj jen to, co skutečně potřebuješ ověřit: hodnotu proměnné před cyklem, návratovou hodnotu funkce, obsah objektu po jeho úpravě. U objektů použij console.log(JSON.stringify(objekt, null, 2)), abys viděl strukturu čitelně. Pozor na to, že výpis [https://www.biggerpockets.com/search?utf8=%E2%9C%93&term=objektu objektu] se v konzoli může zobrazit až později, když už je [https://www.dict.cc/?s=hodnota hodnota] změněná – proto raději loguj rovnou serializovanou podobu.<br><br>Výkon SQL dotazů nezávisí jen na výkonu serveru. Většinu problémů způsobuje sám dotaz – jeho struktura, způsob filtrování a to, co databázi nutíte dělat. Následujících pět návyků pomůže odhalit a odstranit nejčastější příčiny pomalých odpovědí.<br><br>Než začneš cokoli měnit v kódu, otevři vývojářské nástroje v prohlížeči. Klávesou F12 nebo zkratkou Ctrl+Shift+I (na Macu Cmd+Option+I) se dostaneš k panelu, který je pro ladění JavaScriptu naprosto zásadní. První záložka, kterou potřebuješ, je Console. Uvidíš v ní chyby, varování a výpisy z tvého kódu. Pokud tam nic není, neznamená to,  Here's more information on [http://Crativ.Co.kr/bbs/board.php?bo_table=info1&wr_id=140413 http://Crativ.Co.kr/] check out our own web-site. že je vše v pořádku – možná jen chyba nastala jinde, třeba při načítání souboru, a konzole o ní mlčí.<br><br>Selektory a normalized data místo hlubokého vnořování Do storu neukládejte pole objektů, kde se každý objekt dotahuje ručně. Vytvořte dvě kolekce: jednu s entitami podle ID a druhou s pořadím ID. Aktualizace jednoho záznamu pak neznamená kopírovat celé pole, ale přepsat jediný klíč. Selektory pište tak, aby vracely co nejmenší kus stavu, a používejte memoizaci. Bez ní se nový objekt vytvoří při každém volání a komponenta se překreslí zbytečně.<br><br>Častou chybou je špatné pochopení asynchronního kódu. Když volání funkce vrátí Promise nebo použije async/await, breakpoint se může zastavit jindy, než čekáš. Sleduj proto pořadí výpisů v konzoli a nezapomeň, že kód po await se vykoná až po splnění promise. Další typický problém je záměna přiřazení a porovnání: místo == nebo === napíšeš = a proměnná se tiše přepíše. Prohlížeč to často neoznačí jako chybu, takže si na to dej pozor při čtení vlastního kódu.<br>