3 začiatočnícke chyby, ktoré môžu zničiť vašu aplikáciu

Ako vývojár Reactu musíte pri kódovaní s rámcom urobiť nejaké chyby. Niektoré z týchto chýb sú celkom bežné. A kvôli ich jemnej povahe môže byť pre vás ťažké identifikovať tieto problémy pri ladení vašej aplikácie.

Objavte tri z najbežnejších chýb React, ktorých sa vývojári dopúšťajú. Tieto chyby môžete urobiť ako začiatočník, stredne pokročilý alebo pokročilý vývojár Reactu. Ale keď sa o nich a ich dôsledkoch dozviete, pomôže vám to vyhnúť sa im a vyriešiť ich.

1. Použitie nesprávneho typu funkcie spätného volania

Spracovanie udalostí je bežnou praxou v React, cez Výkonná funkcia JavaScriptu na počúvanie udalostí. Možno budete chcieť zmeniť farbu tlačidla, keď naň umiestnite kurzor myši. Možno budete chcieť odoslať údaje formulára na server pri odoslaní. V oboch týchto scenároch by ste museli udalosti odovzdať funkciu spätného volania, aby ste vykonali požadovanú reakciu. Toto je miesto, kde niektorí vývojári Reactu robia chyby.

Zvážte napríklad nasledujúci komponent:

exportpredvolenáfunkciuApp() {
funkciurukoväťOdoslať(e) {
 e.preventDefault()
konzoly.log("Formulár odoslaný!")
 }
funkciuvytlačiť(číslo) {
konzoly.log("tlač", číslo)
 }
funkciudablér(číslo) {
vrátiť() => {
konzoly.log("dvojitá", číslo * 2)
 }
 }
vrátiť (
 <>
 {/* Kód pôjde sem */}
 </>
 )
}

Tu máte tri samostatné funkcie. Zatiaľ čo prvé dve funkcie nevracajú nič, tretia vracia inú funkciu. Musíte to mať na pamäti, pretože to bude kľúčové pre pochopenie toho, čo sa budete učiť ďalej.

Teraz, keď prejdeme k JSX, začnime prvým a najbežnejším spôsobom, ako odovzdať funkciu ako obsluhu udalosti:

<formuláronOdoslať={handleSubmit}>
<vstuptypu="text"názov="text"predvolená hodnota="počiatočné"/>
<tlačidlo>Predložiťtlačidlo>
formulár>

Tento príklad odovzdá názov funkcie udalosti prostredníctvom prop onSubmit, takže React zavolá handleSubmit, keď odošlete formulár. Vo vnútri handleSubmit máte prístup k objektu udalosti, ktorý vám poskytuje prístup k vlastnostiam ako event.cieľová.hodnota a metódy ako event.preventDefault().

Druhý spôsob, ako odovzdať funkciu obsluhy udalosti, je zavolať ju vo vnútri funkcie spätného volania. V podstate odovzdávate Click funkciu, ktorá volá print() za vás:

{[1, 5, 7].map((číslo) => {
vrátiť (
 vytlačiť (číslo)}>
 Vytlačiť {číslo}
 </button>
 )
})}

Táto metóda je užitočná v scenároch, kde chcete funkcii odovzdať lokálne údaje. Vyššie uvedený príklad odovzdá každé číslo funkcii print(). Ak by ste použili prvú metódu, potom by ste nemohli odovzdať argumenty do funkcie.

Tretia metóda je tam, kde veľa vývojárov robí veľa chýb. Pripomeňme, že funkcia zdvojovača vracia inú funkciu:

funkciudablér(číslo) {
vrátiť() => {
konzoly.log("dvojitá", číslo * 2)
 }
}

Teraz, ak ste ho použili v JSX takto:

{[1, 5, 7].map((číslo) => {
vrátiť (
 zdvojovač (číslo)}>
 Dvojité {číslo}
 </button>
 )
})}

V tomto prípade funkcia, z ktorej sa vraciate double() je to, čo sa priradí onClick. Je to v podstate to isté, ako skopírovať vrátenú funkciu a vložiť ju do textu onClick. Táto posledná metóda nemá žiadny prípad použitia. Vo väčšine prípadov je lepšie pridať funkciu ako premennú (prvá metóda) alebo zavolať funkciu v rámci spätného volania (druhá metóda).

Všetky tri techniky sú platné, pretože vo všetkých prípadoch odovzdávate funkciu udalosti. V Reacte sa musíte uistiť, že odovzdávate funkciu vlastnosti udalosti. Môže to byť premenná, pevne zakódovaná funkcia (inline) alebo objekt/funkcia, ktorá vracia inú funkciu.

2. Výstup nuly počas falošnej kontroly

Keď si podmienené vykreslenie prvku v React, môžete použiť príkaz if... else alebo techniku ​​skratovania. Skratovanie zahŕňa použitie dvojitého ampersandu (&&). Ak sa podmienka pred ampersandom vyhodnotí ako pravdivá, prehliadač spustí kód nasledujúci za ampersandom. Ak nie, prehliadač nespustí žiadny kód.

Skrat je lepšia technika vďaka svojej stručnej syntaxi, ale prichádza s vedľajším efektom, ktorý si mnohí vývojári nevšimnú. K tejto chybe dochádza v dôsledku nepochopenia toho, ako presne JSX pracuje s falošnými hodnotami.

Zvážte nasledujúci kód:

exportpredvolenáfunkciuApp() {
konšt pole = [1, 2, 3, 4]
vrátiť (


 {array.length && (


Pole položky: </span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Pokiaľ má pole niečo v sebe, React vytlačí každú položku na stránke. Je to kvôli pole.dĺžka šek vracia pravdivú hodnotu. Čo sa však stane, ak je vaše pole prázdne? Najprv sa na stránke zobrazia nasledujúce prvky, čo by ste očakávali. Na obrazovke by sa však objavila čudná nula.

Dôvodom je to pole.dĺžka vráti nulu. Hodnota nula je v JavaScripte nepravdivá. A problém je v tom, že JSX vykresľuje na obrazovke nulu. Ostatné falošné hodnoty ako null, false a undefined sa nevykreslia. To môže viesť k zlej používateľskej skúsenosti, pretože na stránke sa vždy zobrazí nula. Niekedy môže byť nula taká malá, že si ju ani nevšimnete.

Riešením je uistiť sa, že vraciate iba hodnotu null, undefined alebo false. Urobíte to tak, že v podmienke výslovne skontrolujete nulu namiesto spoliehania sa na falošnú hodnotu:

exportpredvolenáfunkciuApp() {
konšt pole = [1, 2, 3, 4]
vrátiť (


 {array.length !== 0 && (


Pole položky: </span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Teraz sa hodnota nula nezobrazí na obrazovke, aj keď je pole prázdne.

3. Nedostatočná aktualizácia stavu

Keď aktualizujete stav v komponente React, musíte to urobiť správne, aby ste sa vyhli nežiaducim vedľajším účinkom. Najhoršie chyby sú tie, ktoré za vás nevyhadzujú žiadne chyby. Sťažujú ladenie a zisťovanie, v čom je problém. Slabé aktualizácie stavu majú tendenciu mať takýto účinok.

Táto chyba pramení z toho, že nerozumiete, ako aktualizovať stav, keď používate existujúci stav. Zvážte napríklad nasledujúci kód:

exportpredvolenáfunkciuApp() {
konšt [pole, setArray] = useState([1, 2, 3])
funkciuaddNumberToStart() {
 array.unshift (číslo)
 setArray (pole)
 }
funkciuaddNumberToEnd() {
 array.unshift (číslo)
 setArray (pole)
 }
vrátiť (
 <>
 {array.join(", ")}


 onClick={() => {
 addNumberToStart(0)
 addNumberToEnd(0)
konzoly.log (pole)
 }}
 >
 Pridať 0 na začiatok/koniec
 </button>
 </>
 )
}

Ak by ste spustili vyššie uvedený kód, všimli by ste si, že obe funkcie pridali nulu na začiatok a koniec poľa. Ale nepridal nuly do poľa vytlačeného na stránke. Môžete klikať na tlačidlo, ale používateľské rozhranie zostáva rovnaké.

Je to preto, že v oboch funkciách meníte svoj stav array.push(). React výslovne upozorňuje, že stav musí byť v Reacte nemenný, čo znamená, že ho nemôžete vôbec zmeniť. React používa referenčné hodnoty so svojím stavom.

Riešením je získať prístup k aktuálnemu stavu (currentArray), vytvoriť kópiu tohto stavu a vykonať aktualizácie tejto kópie:

funkciuaddNumberToStart(číslo) {
 setArray((currentArray) => {
vrátiť [číslo, ...currentArray]
 })
}
funkciuaddNumberToStart(číslo) {
 setArray((currentArray) => {
vrátiť [...aktuálne pole, číslo]
 })
}

Toto je správna metóda na aktualizáciu stavu v React. Teraz, keď kliknete na tlačidlo, pridá nulu na začiatok a koniec poľa. Čo je však najdôležitejšie, aktualizácie sa na stránke odrazia okamžite.

Ďalšie dôležité koncepty JavaScriptu pre React

Tento článok popisuje niektoré bežné chyby, ktorým sa treba vyhnúť pri kódovaní v Reacte. Všetky tri tu uvedené chyby pochádzajú z nepochopenia správneho JavaScriptu. Pretože React je rámec JavaScriptu, budete potrebovať dobré znalosti JavaScriptu, aby ste mohli pracovať s Reactom. To znamená naučiť sa dôležité pojmy, ktoré sa najviac týkajú vývoja Reactu.