Če React še niste spoznali, se morda sprašujete, kaj so React Hooks in kdaj jih morate uporabiti. React je v izdaji 16.8 uvedel samo kljuke, vendar so hitro postale bistvena značilnost knjižnice.
Naučite se vse o osnovah React Hooks in odkrijte nekaj najboljših praks za njihovo uporabo v svojih aplikacijah React.
Kaj so React Hooks?
React Hooks vam omogočajo uporabo stanja in drugih funkcij React brez pisanja dodatne kode. Kavlji so odličen način, da naredite kodo bolj berljivo in vzdržljivo.
Nekaj jih je različne zanke v Reactu, vendar sta najpogosteje uporabljena useState in useEffect. Kavelj useState vam omogoča dodajanje stanja vašim komponentam. To je uporabno za stvari, kot je sledenje uporabnikovim vnosom ali spremembam obrazca. Kavelj useEffect vam omogoča zagon funkcije vsakič, ko se komponenta upodablja. To je uporabno za stvari, kot je pridobivanje podatkov iz API-ja ali nastavitev naročnine.
Kdaj uporabiti React Hooks?
React Hooks uporabite vedno, ko morate komponenti dodati dodatne funkcije. Na primer, če morate slediti uporabnikovemu vnosu, bi uporabili kavelj useState. Če morate pridobiti podatke iz API-ja, bi uporabili kljuko useEffect. Lahko tudi
ustvarite kljuke po meri za klice API-ja.Če ste šele začeli uporabljati React, vam morda še ne bo treba uporabljati Hooks. Ko pa izdelate bolj zapletene aplikacije, boste ugotovili, da so Hooks odličen način za dodajanje dodatne funkcionalnosti vašim komponentam.
Najboljše prakse s kavlji React
Zdaj, ko veste, kaj so React Hooks in kdaj jih uporabiti, se pogovorimo o nekaterih najboljših praksah.
1. Samo klicne kljuke iz funkcij React
React Hooks morate klicati samo iz funkcij React. Če poskusite poklicati odzivne kljuke iz komponente razreda, boste prejeli napako.
To je zato, ker lahko React Hook pokličete samo iz React funkcije. React funkcije so komponente, ki jih deklarirate s ključno besedo funkcije.
Tukaj je primer komponente funkcije React:
uvoz Odziv, {useState} od 'reagirati';funkcijoaplikacija() {
konst [count, setCount] = useState(0);
vrnitev (
<div>
<str>{count}</str>
<gumb onClick={() => setCount (štetje + 1)}>
Kliknite me
</button>
</div>
);
}
In tukaj je primer komponente razreda:
uvoz Reagiraj, {Component} od 'reagirati';razredaplikacijase raztezaKomponenta{
stanje = {
štetje: 0
};
render() {
vrnitev (
<div>
<str>{this.state.count}</str>
<gumb onClick={() => this.setState({ count: this.state.count + 1 })}>
Kliknite me
</button>
</div>
);
}
}
Prvi primer deklarira komponento App s ključno besedo function, medtem ko drugi uporablja ključno besedo class.
2. Uporabite samo en useEffect Hook
Če uporabljate kljuko useEffect, uporabite samo eno na komponento. To je zato, ker se useEffect zažene vsakič, ko se komponenta upodablja.
Če imate več kavljev useEffect, se bodo vsi zagnali vsakič, ko bo komponenta upodobljena. To lahko povzroči nepričakovano vedenje in težave z delovanjem. V spodnjem primeru se bosta oba useEffecta izvajala vsakič, ko bo upodobljena komponenta aplikacije.
uvoz Odziv, {useState, useEffect} od 'reagirati';funkcijoaplikacija() {
konst [count, setCount] = useState(0);useEffect(() => {
console.log('To se bo zagnalo vsakič, ko bo upodobljena komponenta aplikacije!');
}, []);useEffect(() => {
console.log('To se bo zagnalo tudi vsakič, ko bo upodobljena komponenta aplikacije!');
}, []);
vrnitev (
<div>
<str>{count}</str>
<gumb onClick={() => setCount (štetje + 1)}>
Kliknite me
</button>
</div>
);
}
Namesto uporabe več kavljev useEffect, lahko uporabite en sam kavelj useEffect in vanj vstavite vso svojo kodo. V spodnjem primeru se bo ob vsakem upodabljanju komponente aplikacije zagnal samo en kavelj useEffect.
uvoz Odziv, {useState, useEffect} od 'reagirati';funkcijoaplikacija() {
konst [count, setCount] = useState(0);useEffect(() => {
console.log('To se bo zagnalo vsakič, ko bo upodobljena komponenta aplikacije!');
console.log('To se bo zagnalo tudi vsakič, ko bo upodobljena komponenta aplikacije!');
}, []);
vrnitev (
<div>
<str>{count}</str>
<gumb onClick={() => setCount (štetje + 1)}>
Kliknite me
</button>
</div>
);
}
To pomeni, da lahko React Hooks pokličete samo iz prvega primera. Če poskusite poklicati React Hooks iz drugega primera, boste prejeli napako.
3. Uporabite kljuke na najvišji ravni
Ena najboljših praks s trnki React je njihova uporaba na najvišji ravni. Izogibajte se uporabi kavljev znotraj zank, pogojev ali ugnezdenih funkcij. Na primer, če uporabite State znotraj zanke for, bo React ob vsakem zagonu zanke ustvaril novo spremenljivko stanja. To lahko povzroči nepričakovano vedenje.
uvoz Odziv, {useState} od 'reagirati';funkcijoaplikacija() {
za (pustiti jaz = 0; jaz < 10; i++) {
// Ne počni tega!
konst [count, setCount] = useState(0);
}
vrnitev (
<div>
<str>{count}</str>
<gumb onClick={() => setCount (štetje + 1)}>
Kliknite me
</button>
</div>
);
}
V zgornjem primeru bo komponenta aplikacije upodobila samo štetje in gumb iz zadnje ponovitve zanke. To je zato, ker React samo posodobi spremenljivko stanja iz zadnje ponovitve.
Namesto uporabeState znotraj zanke, lahko deklarirate spremenljivko stanja zunaj zanke. Na ta način bo React ustvaril samo eno spremenljivko stanja in jo ustrezno posodobil.
uvoz Odziv, {useState} od 'reagirati';funkcijoaplikacija() {
// To je pravilen način za uporabo useState znotraj zanke
konst [count, setCount] = useState(0);za (pustiti jaz = 0; jaz < 10; i++) {
// ...
}
vrnitev (
<div>
<str>{count}</str>
<gumb onClick={() => setCount (štetje + 1)}>
Kliknite me
</button>
</div>
);
}
4. Ne pretiravajte s trnki
React Hooks so zmogljivo orodje, vendar se izogibajte njihovi pretirani uporabi. Če ugotovite, da uporabljate več Hookov v vsaki komponenti, jih morda pretiravate.
React Hooks so najbolj uporabni, ko morate deliti stanje med več komponentami. Izogibajte se uporabi nepotrebnih kavljev, ker lahko otežijo branje vaše kode in lahko vplivajo na zmogljivost, če jih uporabljate pretirano.
Dodajte več funkcionalnosti s kavlji React 18
Z izdajo React 18 so na voljo nove kljuke. Vsak kavelj je specifičen za določeno funkcijo React. Seznam vseh razpoložljivih trnkov lahko najdete na spletni strani React. Toda najpogosteje uporabljeni kljuki sta še vedno useState in useEffect.
