React este unul dintre cele mai populare framework-uri front-end pentru JavaScript. Spre deosebire de alte cadre precum Angular, este foarte lipsit de păreri. Prin urmare, rămâne la latitudinea dvs. să decideți cum doriți să scrieți sau să vă structurați codul React.

Acest articol explorează câteva practici pe care ar trebui să le urmați pentru a îmbunătăți performanța aplicației dvs. React.

1. Utilizarea componentelor funcționale și a cârligelor în loc de clase

În React, poți utilizați componente de clasă sau funcționale cu cârlige. Cu toate acestea, ar trebui să utilizați componente funcționale și cârlige mai des, deoarece acestea au ca rezultat un cod mai concis și mai ușor de citit în comparație cu clasele.

Luați în considerare următoarea componentă de clasă care afișează date din API-ul NASA.

clasa NasaData extinde React. componenta {
 constructor (recuzită) {
 super (recuzită);
 this.state = {
 date: [],
 };
 }
 componentDidMount() {
 aduce(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")





instagram viewer


 .then((res) => res.json())
 .then((json) => {
 this.setState({
 date: json,
 });
 });
 }
 randa() {
 const { date } = this.state;
 dacă (!lungimea.datelor)
 întoarcere (


 Colectare de date... 
{" "}



 );
 întoarcere (
 <>
 Preluați date folosind componenta Class 
{" "}
 {data.map((articol) => (
{item.title}

 ))}
 );
 }
}

Aceeași componentă poate fi scrisă folosind cârlige.

const NasaData = () => {
 const [date, setdata] = useState (null);
 useEffect(() => {
 aduce(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 setdata (json);
 });
 }, [date]);
 întoarcere (
 <>
 Preluați date folosind componenta Class 
{" "}
 {data.map((articol) => (
{item.title}

 ))}
 );
};

Chiar dacă blocul de cod de mai sus face același lucru ca și componenta de clasă, este mai puțin complex, minim și ușor de înțeles, ceea ce contribuie la o experiență mai bună pentru dezvoltatori.

2. Evitați utilizarea Statelor (dacă este posibil)

Starea React ține evidența datelor care, atunci când sunt modificate, declanșează redarea din nou a componentei React. Când construiți aplicații React, evitați să folosiți starea cât mai mult posibil, deoarece cu cât folosiți mai multă stare, cu atât trebuie să urmăriți mai multe date în aplicația dvs.

O modalitate de a minimiza utilizarea statului este declararea acestuia numai atunci când este necesar. De exemplu, dacă preluați datele utilizatorului dintr-un API, stocați întregul obiect utilizator în stare în loc să stocați proprietățile individuale.

În loc să faci asta:

const [nume utilizator, setusername] = useState('')
const [parolă, setparolă] = useState('')

Fa asta:

const [utilizator, setuser] = useState({})

Atunci când decideți asupra unei structuri de proiect, alege unul centrat pe componente. Aceasta înseamnă să aveți toate fișierele referitoare la o componentă într-un singur folder.

Dacă ați crea un Bara de navigare componentă, creați un folder numit bara de navigare conţinând Bara de navigare componenta în sine, foaia de stil și alte fișiere JavaSript și active utilizate în componentă.

Un singur folder care conține toate fișierele unei componente facilitează reutilizarea, partajarea și depanarea. Dacă trebuie să vedeți cum funcționează o componentă, trebuie să deschideți un singur folder.

4. Evitați utilizarea indicilor ca elemente cheie

React folosește chei pentru a identifica în mod unic elementele dintr-o matrice. Cu ajutorul tastelor, React poate identifica elementul care a fost modificat, adăugat sau eliminat din matrice.

De cele mai multe ori, atunci când redați matrice, puteți utiliza indexul ca cheie.

const Elemente = () => {
 const arr = ["articol1", "articol2", "articol3", "articol4", "articol5"];
 întoarcere (
 <>
 {arr.map((elem, index) => {
{elem}
;
 })}
 );
};

Deși uneori acest lucru funcționează, utilizarea indexului ca cheie poate introduce probleme, mai ales dacă se așteaptă ca lista să se schimbe. Luați în considerare această listă.

const arr = ["articol1", "articol2", "articol3", "articol4", "articol5"];

În prezent, primul articol din listă, „Punctul 1” este la indicele zero, dar dacă ați adăugat un alt element la începutul listei, „Punctul 1” indexul s-ar schimba la 1, ceea ce modifică comportamentul matricei dvs.

Soluția este să folosiți o valoare unică ca index pentru a vă asigura că identitatea articolului din listă este menținută.

5. Optează pentru fragmente în loc de div-uri acolo unde este posibil

Componentele React trebuie să returneze codul împachetat într-o singură etichetă, de obicei a sau un fragment React. Ar trebui să optați pentru fragmente acolo unde este posibil.

Folosind crește dimensiunea DOM, mai ales în proiectele uriașe, deoarece cu cât aveți mai multe etichete sau noduri DOM, cu atât are nevoie de mai multă memorie site-ul dvs. și cu atât mai multă putere folosește un browser pentru a vă încărca site-ul. Acest lucru duce la o viteză mai scăzută a paginii și o experiență potențială slabă a utilizatorului.

Un exemplu de eliminare a lucrurilor inutile tags nu le folosește atunci când returnează un singur element.

Butonul const = () => {
 întoarcere Afişa;
};

6. Urmați convențiile de denumire

Ar trebui să utilizați întotdeauna PascalCase atunci când numiți componente pentru a le diferenția de alte fișiere JSX non-componente. De exemplu: TextField, NavMenu, și Butonul de succes.

Utilizați camelCase pentru funcțiile declarate în componentele React, cum ar fi handleInput() sau showElement().

7. Evitați codurile repetitive

Dacă observați că scrieți cod duplicat, convertiți-l în componente care pot fi reutilizate.

De exemplu, este mai logic să creați o componentă pentru meniul de navigare în loc să scrieți în mod repetat codul în fiecare componentă care necesită un meniu.

Acesta este avantajul unei arhitecturi bazate pe componente. Vă puteți împărți proiectul în componente mici pe care le puteți reutiliza în aplicația dvs.

8. Utilizați Destructurarea obiectelor pentru recuzită

În loc să treceți obiectul props, utilizați destructurarea obiectului pentru a transmite numele recuzită. Acest lucru elimină necesitatea de a face referire la obiectul recuzită de fiecare dată când trebuie să îl utilizați.

De exemplu, următoarea este o componentă care utilizează recuzită așa cum este.

Buton const = (recuzită) => {
 întoarcere {props.text};
};

Cu destructurarea obiectelor, vă referiți direct la text.

Buton const = ({text}) => {
 întoarcere {text};
};

9. Redați în mod dinamic matrice folosind harta

Utilizare Hartă() pentru a reda dinamic blocuri HTML repetate. De exemplu, puteți utiliza Hartă() pentru a reda o listă de articole în Etichete.

const Elemente = () => {
 const arr = ["articol1", "articol2", "articol3", "articol4", "articol5"];
 întoarcere (
 <>
 {arr.map((elem, index) => {
{elem}
;
 })}
 );
 };

În scopuri de comparație, iată cum puteți reda lista fără Hartă(). Această abordare este foarte repetitivă.

const List = () => {
 întoarcere (


Punctul 1

Punctul 2

Punctul 3

Punctul 4

Punctul 5




 );
};

10. Scrieți teste pentru fiecare componentă a reacției

Scrieți teste pentru componentele pe care le creați, deoarece reduce posibilitățile de erori. Testarea asigură că componentele se comportă așa cum v-ați aștepta. Unul dintre cele mai comune cadre de testare pentru React este Jest și oferă un mediu în care vă puteți executa testele.

Deși React este oarecum flexibil în ceea ce privește modul în care îl puteți utiliza, respectarea unor practici specifice vă va ajuta să profitați la maximum de experiența dvs.

Când urmați aceste sfaturi, țineți cont de proiectul și obiectivele dvs. unele vor fi mai relevante în anumite cazuri decât altele.

Cum să consumați API-uri în React folosind Fetch și Axios

Vrei să știi cum să folosești API-urile? Înțelegerea modului de consumare a API-urilor în React este un element cheie al utilizării API-urilor.

Citiți în continuare

Despre autor