Ako ste novi u Reactu, možda se pitate što su React Hookovi i kada ih trebate koristiti. React je samo uveo kuke u svom izdanju 16.8, ali su brzo postale bitna značajka biblioteke.
Naučite sve o osnovama React kuka i otkrijte neke najbolje prakse za njihovu upotrebu u vašim React aplikacijama.
Što su React kuke?
React Hooks vam omogućuje korištenje stanja i drugih React značajki bez pisanja dodatnog koda. Kuke su izvrstan način da svoj kod učinite čitljivijim i lakšim za održavanje.
Ima ih nekoliko različite kuke u Reactu, ali najčešće se koriste useState i useEffect. UseState hook vam omogućuje dodavanje stanja vašim komponentama. Ovo je korisno za stvari poput praćenja unosa korisnika ili promjena obrasca. UseEffect hook vam omogućuje pokretanje funkcije kad god se komponenta renderira. Ovo je korisno za stvari poput dohvaćanja podataka iz API-ja ili postavljanja pretplate.
Kada biste trebali koristiti React kuke?
Trebali biste koristiti React Hooks kad god trebate dodati dodatnu funkcionalnost komponenti. Na primjer, ako trebate pratiti korisnički unos, upotrijebili biste kuku useState. Ako trebate dohvatiti podatke iz API-ja, upotrijebili biste kuku useEffect. Također možete
stvoriti prilagođene spojnice za API pozive.Ako ste tek počeli koristiti React, možda još ne trebate koristiti Hooks. Ali kako budete gradili složenije aplikacije, otkrit ćete da su Hooks izvrstan način za dodavanje dodatne funkcionalnosti vašim komponentama.
Najbolji primjeri iz prakse s React kukicama
Sada kada znate što su React Hooks i kada ih koristiti, razgovarajmo o nekim najboljim primjerima iz prakse.
1. Pozovite samo kuke iz React funkcija
Trebali biste pozivati samo React kuke iz React funkcija. Ako pokušate pozvati react hookove iz komponente klase, dobit ćete pogrešku.
To je zato što React Hook možete pozvati samo iz React funkcije. React funkcije su komponente koje deklarirate pomoću ključne riječi funkcije.
Evo primjera komponente funkcije React:
uvoz Reagiraj, {useState} iz 'reagirati';funkcijaaplikacija() {
konst [count, setCount] = useState(0);
povratak (
<div>
<str>{računati}</str>
<gumb onClick={() => setCount (broj + 1)}>
Klikni me
</button>
</div>
);
}
Evo primjera komponente klase:
uvoz Reagiraj, {Component} iz 'reagirati';razredaaplikacijaproteže sekomponenta{
stanje = {
brojati: 0
};
render() {
povratak (
<div>
<str>{this.state.count}</str>
<gumb onClick={() => this.setState({ count: this.state.count + 1 })}>
Klikni me
</button>
</div>
);
}
}
Prvi primjer deklarira App komponentu pomoću ključne riječi function, dok drugi koristi ključnu riječ class.
2. Koristite samo jednu kuku useEffect
Ako koristite kuku useEffect, trebali biste koristiti samo jednu po komponenti. To je zato što se useEffect pokreće kad god se komponenta renderira.
Ako imate više useEffect kuka, sve će se pokrenuti kad god se komponenta renderira. To može dovesti do neočekivanog ponašanja i problema s izvedbom. U donjem primjeru, oba useEffecta pokrenut će se kad god se komponenta aplikacije renderira.
uvoz Reagiraj, {useState, useEffect} iz 'reagirati';funkcijaaplikacija() {
konst [count, setCount] = useState(0);useEffect(() => {
console.log('Ovo će se pokrenuti kad god se komponenta aplikacije renderira!');
}, []);useEffect(() => {
console.log('Ovo će se također pokrenuti kad god se komponenta aplikacije renderira!');
}, []);
povratak (
<div>
<str>{računati}</str>
<gumb onClick={() => setCount (broj + 1)}>
Klikni me
</button>
</div>
);
}
Umjesto upotrebe više useEffect kuka, možete koristiti jednu useEffect kuku i staviti sav svoj kod u nju. U donjem primjeru, samo će se jedna useEffect kuka pokrenuti kad god se komponenta aplikacije renderira.
uvoz Reagiraj, {useState, useEffect} iz 'reagirati';funkcijaaplikacija() {
konst [count, setCount] = useState(0);useEffect(() => {
console.log('Ovo će se pokrenuti kad god se komponenta aplikacije renderira!');
console.log('Ovo će se također pokrenuti kad god se komponenta aplikacije renderira!');
}, []);
povratak (
<div>
<str>{računati}</str>
<gumb onClick={() => setCount (broj + 1)}>
Klikni me
</button>
</div>
);
}
To znači da možete pozvati React Hooks samo iz prvog primjera. Ako pokušate pozvati React Hooks iz drugog primjera, dobit ćete pogrešku.
3. Koristite kuke na najvišoj razini
Jedna od najboljih praksi s React Hookovima je njihova upotreba na najvišoj razini. Trebali biste izbjegavati korištenje kuka unutar petlji, uvjeta ili ugniježđenih funkcija. Na primjer, ako koristiteState unutar for petlje, svaki put kada se petlja pokrene, React će stvoriti novu varijablu stanja. To može dovesti do neočekivanog ponašanja.
uvoz Reagiraj, {useState} iz 'reagirati';funkcijaaplikacija() {
za (neka ja = 0; ja < 10; i++) {
// Ne čini to!
konst [count, setCount] = useState(0);
}
povratak (
<div>
<str>{računati}</str>
<gumb onClick={() => setCount (broj + 1)}>
Klikni me
</button>
</div>
);
}
U gornjem primjeru, App komponenta će ikada prikazati brojač i gumb samo iz posljednje iteracije petlje. To je zato što React samo ažurira varijablu stanja iz zadnje iteracije.
Umjesto korištenjaState unutar petlje, možete deklarirati varijablu stanja izvan petlje. Na ovaj način, React će stvoriti samo jednu varijablu stanja i ažurirati je u skladu s tim.
uvoz Reagiraj, {useState} iz 'reagirati';funkcijaaplikacija() {
// Ovo je ispravan način za korištenje useState unutar petlje
konst [count, setCount] = useState(0);za (neka ja = 0; ja < 10; i++) {
// ...
}
povratak (
<div>
<str>{računati}</str>
<gumb onClick={() => setCount (broj + 1)}>
Klikni me
</button>
</div>
);
}
4. Nemojte pretjerano koristiti udice
React Hooks su moćan alat, ali trebali biste izbjegavati njihovo pretjerano korištenje. Ako se nađete u upotrebi više kukica u svakoj komponenti, možda ih pretjerate.
React Hooks su najkorisniji kada trebate podijeliti stanje između više komponenti. Izbjegavajte korištenje nepotrebnih kuka jer mogu otežati čitanje vašeg koda i mogu utjecati na izvedbu ako se pretjerano koriste.
Dodajte više funkcionalnosti koristeći React 18 kuke
S izdavanjem Reacta 18, dostupne su nove udice. Svaki hook je specifičan za određenu React značajku. Popis svih dostupnih udica možete pronaći na React web stranici. Ali najčešće korištene kuke su još uvijek useState i useEffect.