React je jedan od najpopularnijih front-end okvira za JavaScript. Za razliku od drugih okvira kao što je Angular, vrlo je bez mišljenja. Stoga je na vama da odlučite kako želite napisati ili strukturirati svoj React kod.

Ovaj članak istražuje neke prakse koje biste trebali slijediti kako biste poboljšali performanse svoje React aplikacije.

1. Korištenje funkcionalnih komponenti i kukica umjesto klasa

U Reactu možete koristiti klasne ili funkcionalne komponente s kukama. Međutim, trebali biste češće koristiti funkcionalne komponente i kuke jer rezultiraju sažetijim i čitljivijim kodom u usporedbi s klasama.

Razmotrite sljedeću komponentu klase koja prikazuje podatke iz NASA API-ja.

klasa NasaData proširuje React. komponenta {
 konstruktor (rekviziti) {
 super (rekviziti);
 this.state = {
 podaci: [],
 };
 }
 componentDidMount() {
 dohvati (" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 this.setState({
 podaci: json,
 });
 });
 }
 render() {
 const { podaci } = ovo.stanje;

instagram viewer


 ako (!podatak.dužina)
 vratiti (


 Dohvaćanje podataka... 
{" "}



 );
 vratiti (
 <>
 Dohvatite podatke pomoću komponente Class 
{" "}
 {data.map((stavka) => (
{item.title}

 ))}
 );
 }
}

Ista komponenta može se napisati pomoću kukica.

const NasaData = () => {
 const [podaci, setdata] = useState (null);
 useEffect(() => {
 dohvati (" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 setdata (json);
 });
 }, [podaci]);
 vratiti (
 <>
 Dohvatite podatke pomoću komponente Class 
{" "}
 {data.map((stavka) => (
{item.title}

 ))}
 );
};

Iako gornji blok koda radi istu stvar kao komponenta klase, manje je složen, minimalan i lako razumljiv što doprinosi boljem iskustvu programera.

2. Izbjegavajte korištenje stanja (ako je moguće)

React stanje prati podatke koji kada se promijene pokreću React komponentu za ponovno generiranje. Kada gradite React aplikacije, izbjegavajte korištenje stanja koliko god je to moguće jer što više stanja koristite, više podataka morate pratiti u svojoj aplikaciji.

Jedan od načina minimiziranja korištenja stanja je deklariranje samo kada je to potrebno. Na primjer, ako dohvaćate korisničke podatke iz API-ja, pohranite cijeli korisnički objekt u stanje umjesto pohranjivanja pojedinačnih svojstava.

Umjesto da ovo učinite:

const [korisničko ime, setusername] = useState('')
const [password, setpassword] = useState('')

Napravi to:

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

Prilikom odlučivanja o strukturi projekta, idite na komponentu usmjerenu. To znači imati sve datoteke koje se tiču ​​jedne komponente u jednoj mapi.

Ako ste stvarali a Navbar komponentu, stvorite mapu pod nazivom navigacijska traka koji sadrži Navbar sama komponenta, stilska tablica i druge JavaSript datoteke i datoteke sredstava koje se koriste u komponenti.

Jedna mapa koja sadrži sve datoteke komponente olakšava ponovnu upotrebu, dijeljenje i otklanjanje pogrešaka. Ako trebate vidjeti kako komponenta radi, trebate otvoriti samo jednu mapu.

4. Izbjegavajte korištenje indeksa kao ključnih rekvizita

React koristi ključeve za jedinstvenu identifikaciju stavki u nizu. Pomoću tipki React može točno odrediti koja je stavka promijenjena, dodana ili uklonjena iz niza.

Većinu vremena kada renderirate nizove, možete koristiti indeks kao ključ.

const Stavke = () => {
 const arr = ["stavk1", "stavka2", "stavka3", "stav 4", "stavk5"];
 vratiti (
 <>
 {arr.map((elem, indeks) => {
{elem}
;
 })}
 );
};

Iako ovo ponekad funkcionira, korištenje indeksa kao ključa može dovesti do problema, osobito ako se očekuje da će se popis promijeniti. Razmotrite ovaj popis.

const arr = ["stavk1", "stavka2", "stavka3", "stav 4", "stavk5"];

Trenutno, prva stavka popisa, “Stavka1” je na indeksu nula, ali ako ste dodali još jednu stavku na početak popisa, “Stavka1” indeks bi se promijenio u 1 što mijenja ponašanje vašeg niza.

Rješenje je korištenje jedinstvene vrijednosti kao indeksa kako bi se osiguralo održavanje identiteta stavke popisa.

5. Odlučite se za fragmente umjesto Divova gdje je to moguće

React komponente moraju vratiti kod umotan u jednu oznaku obično a ili React fragment. Trebali biste se odlučiti za fragmente gdje je to moguće.

Korištenje povećava veličinu DOM-a, osobito u velikim projektima, budući da što više oznaka ili DOM čvorova imate, to je više memorije potrebno vašoj web stranici i više snage koristi preglednik za učitavanje vaše web stranice. To dovodi do manje brzine stranice i potencijalno lošeg korisničkog iskustva.

Jedan primjer eliminacije nepotrebnog oznake ih ne koristi prilikom vraćanja jednog elementa.

const gumb = () => {
 povratak Prikaz;
};

6. Slijedite konvencije o imenovanju

Uvijek biste trebali koristiti PascalCase kada imenujete komponente kako biste ih razlikovali od drugih ne-komponentnih JSX datoteka. Na primjer: Polje za tekst, NavMenu, i Gumb za uspjeh.

Koristite camelCase za funkcije deklarirane unutar React komponenti kao što su handleInput() ili showElement().

7. Izbjegavajte ponavljanje koda

Ako primijetite da pišete duplicirani kod, pretvorite ga u komponente koje se mogu ponovno koristiti.

Na primjer, ima više smisla stvoriti komponentu za svoj navigacijski izbornik umjesto uzastopnog pisanja koda u svaku komponentu koja zahtijeva izbornik.

To je prednost arhitekture temeljene na komponentama. Možete rastaviti svoj projekt na male komponente koje možete ponovno koristiti u svojoj aplikaciji.

8. Koristite destrukturiranje objekata za rekvizite

Umjesto prosljeđivanja objekta props, upotrijebite destrukturiranje objekta za prosljeđivanje naziva props-a. Ovo odbacuje potrebu da se pozivate na objekt props svaki put kada ga trebate upotrijebiti.

Na primjer, sljedeća je komponenta koja koristi rekvizite kakve jest.

const gumb = (rekviziti) => {
 povratak {props.text};
};

S destrukturiranjem objekta, izravno se pozivate na tekst.

const gumb = ({tekst}) => {
 povratak {tekst};
};

9. Dinamički renderirajte nizove pomoću karte

Koristiti karta() za dinamičko renderiranje ponovljenih HTML blokova. Na primjer, možete koristiti karta() za prikaz popisa stavki u oznake.

const Stavke = () => {
 const arr = ["stavk1", "stavka2", "stavka3", "stav 4", "stavk5"];
 vratiti (
 <>
 {arr.map((elem, indeks) => {
{elem}
;
 })}
 );
 };

Radi usporedbe, evo kako možete prikazati popis bez karta(). Ovaj pristup se vrlo ponavlja.

const Popis = () => {
 vratiti (


Stavka1

Stavka2

Stavka3

Stavka 4

Stavka 5




 );
};

10. Napišite testove za svaku React komponentu

Napišite testove za komponente koje kreirate jer to smanjuje mogućnost pogrešaka. Testiranje osigurava da se komponente ponašaju kako biste očekivali. Jedan od najčešćih okvira za testiranje za React je Jest i pruža okruženje u kojem možete izvršiti svoje testove.

Iako je React donekle fleksibilan u smislu načina na koji ga možete koristiti, praćenje određenih praksi pomoći će vam da izvučete maksimum iz svog iskustva.

Kada slijedite ove savjete, imajte na umu svoj određeni projekt i ciljeve; neki će u određenim slučajevima biti relevantniji od drugih.

Kako konzumirati API-je u Reactu koristeći Fetch i Axios

Želite znati kako koristiti API-je? Razumijevanje upotrebe API-ja u Reactu ključni je element korištenja API-ja.

Pročitajte dalje

O autoru