3 greșeli de reacție pentru începători care vă pot distruge aplicația

În calitate de dezvoltator React, sunteți obligat să faceți unele greșeli atunci când codați cu cadrul. Unele dintre aceste greșeli sunt destul de frecvente. Și datorită naturii lor subtile, s-ar putea să vă fie dificil să identificați aceste probleme pentru a vă depana aplicația.

Descoperiți trei dintre cele mai comune erori React pe care le fac dezvoltatorii. Puteți face aceste greșeli ca dezvoltator React începător, de nivel intermediar sau avansat. Dar învățarea despre ele și implicațiile lor vă va ajuta să le evitați și să le rezolvați.

1. Utilizarea tipului greșit de funcție de apel invers

Gestionarea evenimentelor este o practică comună în React, prin Funcționalitatea puternică de ascultare a evenimentelor a JavaScript. Poate doriți să schimbați culoarea unui buton atunci când treceți cu mouse-ul. Poate doriți să trimiteți datele formularului către server la trimitere. În ambele scenarii, va trebui să transmiteți o funcție de apel invers evenimentului pentru a efectua reacția dorită. Aici unii dezvoltatori React fac greșeli.

Luați în considerare următoarea componentă, de exemplu:

exportMod implicitfuncţieApp() {
funcţiehandleSubmit(e) {
 e.preventDefault()
consolă.Buturuga("Formular depus!")
 }
funcţieimprimare(număr) {
consolă.Buturuga("Imprimare", număr)
 }
funcţiedublator(număr) {
întoarcere() => {
consolă.Buturuga("Dubla", număr * 2)
 }
 }
întoarcere (
 <>
 {/* Codul va merge aici */}
 </>
 )
}

Aici aveți trei funcții separate. În timp ce primele două funcții nu returnează nimic, a treia returnează o altă funcție. Trebuie să ții cont de asta, deoarece va fi cheia pentru a înțelege ce vei învăța în continuare.

Acum, trecând la JSX, să începem cu primul și cel mai comun mod în care ai trece o funcție ca handler de evenimente:

<formăonSubmit={handleSubmit}>
<intraretip="text"Nume="text"valoare implicită="iniţială"/>
<buton>Trimitebuton>
formă>

Acest exemplu transmite numele funcției evenimentului prin prop onSubmit, astfel încât React apelează handleSubmit când trimiteți formularul. În interiorul handleSubmit, puteți accesa obiectul eveniment, care vă oferă acces la proprietăți precum valoare.țintă.de eveniment și metode precum event.preventDefault().

A doua modalitate de a transmite o funcție de gestionare a evenimentelor este să o apelați în interiorul funcției de apel invers. În esență, transmiteți onClick o funcție care apelează print() pentru dvs.:

{[1, 5, 7].Hartă((număr) => {
întoarcere (
 imprimare (număr)}>
 Tipăriți {number}
 </button>
 )
})}

Această metodă este utilă în scenariile în care doriți să transmiteți date locale funcției. Exemplul de mai sus transmite fiecare număr la funcția print(). Dacă ați folosit prima metodă, atunci nu ați putea trece argumente în funcție.

A treia metodă este cea în care mulți dezvoltatori fac multe greșeli. Amintiți-vă că funcția de dublare returnează o altă funcție:

funcţiedublator(număr) {
întoarcere() => {
consolă.Buturuga("Dubla", număr * 2)
 }
}

Acum, dacă l-ați folosit în JSX așa:

{[1, 5, 7].Hartă((număr) => {
întoarcere (
 dublator (număr)}>
 Dublu {număr}
 </button>
 )
})}

În acest caz, funcția de la care te întorci dubla() este ceea ce este atribuit la onClick. Este, în esență, același lucru cu copierea funcției returnate și lipirea ei inline în onClick. Această ultimă metodă nu are niciun caz de utilizare. De cele mai multe ori, este mai bine să adăugați funcția ca variabilă (prima metodă) sau să apelați funcția într-un callback (a doua metodă).

Toate cele trei tehnici sunt valabile pentru că, în toate cazurile, transmiteți o funcție evenimentului. În React, trebuie să vă asigurați că treceți o funcție unei proprietăți de eveniment. Ar putea fi o variabilă, o funcție hard-coded (inline) sau un obiect/funcție care returnează o altă funcție.

2. Ieșirea zero în timpul unei verificări false

Cand esti redarea condiționată a unui element în React, puteți folosi o declarație if...else sau tehnica de scurtcircuitare. Scurtcircuitarea implică utilizarea dublului și (&&). Dacă condiția dinaintea ampersand este evaluată la adevărată, atunci browserul rulează codul după ampersand. Dacă nu, atunci browserul nu execută niciun cod.

Scurtcircuitarea este tehnica mai bună datorită sintaxei sale concise, dar vine cu un efect secundar pe care mulți dezvoltatori nu îl observă. Această greșeală se întâmplă din cauza faptului că nu înțelegem exact cum funcționează JSX cu valori false.

Luați în considerare următorul cod:

exportMod implicitfuncţieApp() {
const matrice = [1, 2, 3, 4]
întoarcere (


 {array.length && (


Matrice articole:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Atâta timp cât matricea are ceva în interior, React va imprima fiecare articol de pe pagină. Acest lucru se datorează matrice.lungime verificarea returnează o valoare adevărată. Dar ce se întâmplă dacă matricea ta este goală? În primul rând, elementele ulterioare vor apărea pe pagină, ceea ce vă așteptați. Cu toate acestea, veți găsi un zero ciudat care apare pe ecran.

Motivul pentru asta este că matrice.lungime returnează zero. Valoarea zero este falsă în JavaScript. Și problema este că JSX redă zero pe ecran. Alte valori false precum null, false și undefined nu sunt redate. Acest lucru poate duce la o experiență proastă a utilizatorului, deoarece zero va apărea întotdeauna pe pagină. Uneori, zeroul poate fi atât de mic încât nici nu-l observi.

Soluția este să vă asigurați că returnați numai nul, nedefinit sau fals. Faceți acest lucru verificând în mod explicit zero în condiție, în loc să vă bazați pe o valoare falsă:

exportMod implicitfuncţieApp() {
const matrice = [1, 2, 3, 4]
întoarcere (


 {array.length !== 0 && (


Matrice articole:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Acum valoarea zero nu se va afișa pe ecran chiar și atunci când matricea este goală.

3. Nu se actualizează corect starea

Când actualizați starea unei componente React, trebuie să o faceți corect pentru a evita orice efecte secundare nedorite. Cele mai grave greșeli sunt cele care nu vă aduc erori. Ele fac dificilă depanarea și aflarea problemei. Actualizările slabe ale stării tind să aibă acest efect.

Această greșeală provine din faptul că nu înțelegeți cum să actualizați starea atunci când utilizați starea existentă. Luați în considerare următorul cod de exemplu:

exportMod implicitfuncţieApp() {
const [matrice, setArray] = useState([1, 2, 3])
funcţieaddNumberToStart() {
 array.unshift (număr)
 setArray (matrice)
 }
funcţieaddNumberToEnd() {
 array.unshift (număr)
 setArray (matrice)
 }
întoarcere (
 <>
 {array.join(", ")}


 onClick={() => {
 addNumberToStart(0)
 addNumberToEnd(0)
consolă.log (matrice)
 }}
 >
 Adăuga 0 la Start/Sfârșit
 </button>
 </>
 )
}

Dacă ar fi să rulați codul de mai sus, ați observa că ambele funcții au adăugat zero la începutul și la sfârșitul matricei. Dar nu a adăugat zerourile la matricea imprimată pe pagină. Puteți continua să faceți clic pe buton, dar interfața de utilizare rămâne aceeași.

Acest lucru se datorează faptului că, în ambele funcții, vă mutați starea cu array.push(). React avertizează în mod explicit că starea trebuie să fie imuabilă în React, ceea ce înseamnă că nu o poți schimba deloc. React folosește valori referențiale cu starea sa.

Soluția este să accesați starea curentă (currentArray), să faceți o copie a acelei stări și să faceți actualizări la acea copie:

funcţieaddNumberToStart(număr) {
 setArray((currentArray) => {
întoarcere [număr, ...currentArray]
 })
}
funcţieaddNumberToStart(număr) {
 setArray((currentArray) => {
întoarcere [...currentArray, număr]
 })
}

Aceasta este metoda potrivită pentru a actualiza starea în React. Acum, când faceți clic pe butonul, acesta adaugă zero la începutul și la sfârșitul matricei. Dar cel mai important, actualizările se vor reflecta pe pagină imediat.

Alte concepte JavaScript importante pentru React

Acest articol a acoperit unele dintre greșelile comune pe care trebuie să le evitați când codați în React. Toate cele trei greșeli prezentate aici provin din neînțelegerea corectă a JavaScript. Deoarece React este un cadru JavaScript, veți avea nevoie de o înțelegere solidă a JavaScript pentru a lucra cu React. Aceasta înseamnă să înveți conceptele importante care se referă cel mai mult la dezvoltarea React.