3 napake začetnika React, ki lahko uničijo vašo aplikacijo

Kot razvijalec Reacta boste zagotovo naredili nekaj napak pri kodiranju z okvirjem. Nekatere od teh napak so precej pogoste. In zaradi njihove subtilne narave, boste morda težko prepoznali te težave za odpravljanje napak v aplikaciji.

Odkrijte tri najpogostejše napake Reacta, ki jih delajo razvijalci. Te napake lahko naredite kot začetnik, srednji ali napredni razvijalec React. Toda učenje o njih in njihovih posledicah vam bo pomagalo, da se jim izognete in jih razrešite.

1. Uporaba napačne vrste funkcije povratnega klica

Obdelava dogodkov je običajna praksa v Reactu, prek Zmogljiva funkcija JavaScripta za poslušanje dogodkov. Morda želite spremeniti barvo gumba, ko nanj premaknete miškin kazalec. Morda želite poslati podatke obrazca strežniku ob oddaji. V obeh teh scenarijih bi morali dogodku posredovati funkcijo povratnega klica, da izvedete želeno reakcijo. Tukaj nekateri React razvijalci delajo napake.

Upoštevajte na primer naslednjo komponento:

izvozprivzetofunkcijoaplikacija() {
funkcijohandleSubmit(e) {
 e.preventDefault()
konzola.log("Obrazec oddan!")
 }
funkcijotiskanje(število) {
konzola.log("Natisni", številka)
 }
funkcijodvojnik(število) {
vrnitev() => {
konzola.log("Dvojno", številka * 2)
 }
 }
vrnitev (
 <>
 {/* Koda bo tukaj */}
 </>
 )
}

Tukaj imate tri ločene funkcije. Medtem ko prvi dve funkciji ne vrneta ničesar, tretja vrne drugo funkcijo. To morate imeti v mislih, ker bo to ključnega pomena za razumevanje tega, kar se boste učili naslednjič.

Zdaj, ko preidemo na JSX, začnimo s prvim in najpogostejšim načinom, kako posredujete funkcijo kot obravnavo dogodkov:

<oblikaonSubmit={handleSubmit}>
<vnosvrsta="besedilo"ime="besedilo"privzeta vrednost="začetnica"/>
<gumb>Predložigumb>
oblika>

Ta primer posreduje ime funkcije dogodku prek prop onSubmit, tako da React pokliče handleSubmit, ko oddate obrazec. Znotraj handleSubmit lahko dostopate do predmeta dogodka, ki vam omogoča dostop do lastnosti, kot je event.target.value in metode, kot so event.preventDefault().

Drugi način posredovanja funkcije obdelovalnika dogodkov je, da jo pokličete znotraj funkcije povratnega klica. V bistvu posredujete onClick funkcijo, ki namesto vas pokliče print():

{[1, 5, 7].zemljevid((število) => {
vrnitev (
 natisni (število)}>
 Natisni {število}
 </button>
 )
})}

Ta metoda je uporabna v scenarijih, kjer želite funkciji posredovati lokalne podatke. Zgornji primer posreduje vsako številko funkciji print(). Če bi uporabili prvo metodo, ne bi mogli posredovati argumentov v funkcijo.

Pri tretji metodi veliko razvijalcev dela veliko napak. Spomnimo se, da funkcija podvajalnik vrne drugo funkcijo:

funkcijodvojnik(število) {
vrnitev() => {
konzola.log("Dvojno", številka * 2)
 }
}

Zdaj, če ste ga uporabili v JSX takole:

{[1, 5, 7].zemljevid((število) => {
vrnitev (
 podvajalnik (število)}>
 Dvojno {število}
 </button>
 )
})}

V tem primeru funkcija, iz katere se vrnete dvojno () je tisto, kar se dodeli onClick. To je v bistvu enako kot kopiranje vrnjene funkcije in njeno vstavljanje v vrstico v onClick. Ta zadnja metoda nima nobenega primera uporabe. Večinoma je bolje, da dodate funkcijo kot spremenljivko (prva metoda) ali pokličete funkcijo znotraj povratnega klica (druga metoda).

Vse tri tehnike so veljavne, ker v vseh primerih dogodku posredujete funkcijo. V Reactu morate zagotoviti, da funkcijo posredujete lastnosti dogodka. Lahko je spremenljivka, trdo kodirana funkcija (inline) ali objekt/funkcija, ki vrne drugo funkcijo.

2. Izpis ničle med lažnim preverjanjem

Ko si pogojno upodabljanje elementa v Reactu, lahko uporabite stavek if...else ali tehniko kratkega stika. Kratkostikanje vključuje uporabo dvojnega znaka & (&&). Če je pogoj pred ampersandom ovrednoten kot resničen, potem brskalnik zažene kodo, ki sledi ampersandu. Če ne, potem brskalnik ne izvede nobene kode.

Kratek stik je zaradi jedrnate sintakse boljša tehnika, vendar ima stranski učinek, ki ga mnogi razvijalci ne opazijo. Do te napake pride, ker ne razumemo, kako natančno JSX deluje z lažnimi vrednostmi.

Razmislite o naslednji kodi:

izvozprivzetofunkcijoaplikacija() {
konst niz = [1, 2, 3, 4]
vrnitev (


 {array.length && (


Array predmetov:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Dokler ima polje nekaj v sebi, bo React natisnil vsak element na strani. To je zaradi niz.dolžina preverjanje vrne resnično vrednost. Toda kaj se zgodi, če je vaše polje prazno? Najprej se bodo naslednji elementi prikazali na strani, kar bi pričakovali. Vendar bi se na zaslonu pojavila čudna ničla.

Razlog za to je ta niz.dolžina vrne nič. Vrednost nič je v JavaScriptu napačna. Težava je v tem, da JSX na zaslonu upodablja nič. Druge lažne vrednosti, kot so null, false in undefined, niso upodobljene. To lahko povzroči slabo uporabniško izkušnjo, ker se bo na strani vedno pojavila ničla. Včasih je lahko ničla tako majhna, da je sploh ne opazite.

Rešitev je zagotoviti, da se vrne samo vrednost null, undefined ali false. To storite tako, da v pogoju izrecno preverite ničlo, namesto da se zanašate na lažno vrednost:

izvozprivzetofunkcijoaplikacija() {
konst niz = [1, 2, 3, 4]
vrnitev (


 {array.length !== 0 && (


Array predmetov:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Zdaj vrednost nič ne bo prikazana na zaslonu, tudi če je niz prazen.

3. Neustrezna posodobitev stanja

Ko posodabljate stanje v komponenti React, morate to narediti pravilno, da se izognete neželenim stranskim učinkom. Najhujše napake so tiste, ki vam ne prinesejo nobenih napak. Zaradi njih je težko odpravljati napake in ugotoviti, v čem je težava. Posodobitve slabega stanja imajo ponavadi ta učinek.

Ta napaka izvira iz nerazumevanja, kako posodobiti stanje, ko uporabljate obstoječe stanje. Upoštevajte na primer naslednjo kodo:

izvozprivzetofunkcijoaplikacija() {
konst [matrika, setArray] = useState([1, 2, 3])
funkcijoaddNumberToStart() {
 array.unshift (število)
 setArray (niz)
 }
funkcijoaddNumberToEnd() {
 array.unshift (število)
 setArray (niz)
 }
vrnitev (
 <>
 {array.join(", ")}


 onClick={() => {
 addNumberToStart(0)
 addNumberToEnd(0)
konzola.log (polje)
 }}
 >
 Dodaj 0 na začetek/konec
 </button>
 </>
 )
}

Če bi zagnali zgornjo kodo, bi opazili, da sta obe funkciji dodali nič na začetek in konec matrike. Vendar ni dodal ničel v niz, natisnjen na strani. Lahko nadaljujete s klikom na gumb, vendar uporabniški vmesnik ostane enak.

To je zato, ker v obeh funkcijah mutirate svoje stanje z array.push(). React izrecno opozarja, da mora biti stanje v Reactu nespremenljivo, kar pomeni, da ga sploh ne morete spremeniti. React uporablja referenčne vrednosti s svojim stanjem.

Rešitev je, da dostopate do trenutnega stanja (currentArray), naredite kopijo tega stanja in posodobite to kopijo:

funkcijoaddNumberToStart(število) {
 setArray((currentArray) => {
vrnitev [število,... trenutna matrika]
 })
}
funkcijoaddNumberToStart(število) {
 setArray((currentArray) => {
vrnitev [...currentArray, number]
 })
}

To je prava metoda za posodobitev stanja v Reactu. Zdaj, ko kliknete gumb, doda ničlo na začetek in konec matrike. Najpomembneje pa je, da se bodo posodobitve takoj odrazile na strani.

Drugi pomembni koncepti JavaScript za React

Ta članek je zajemal nekatere pogoste napake, ki se jim je treba izogibati pri kodiranju v Reactu. Vse tri tukaj obravnavane napake izvirajo iz nepravilnega razumevanja JavaScripta. Ker je React ogrodje JavaScript, boste za delo z Reactom potrebovali dobro razumevanje JavaScripta. To pomeni učenje pomembnih konceptov, ki so najbolj povezani z razvojem React.