Ja esat iesācējs React, jums varētu rasties jautājums, kas ir React Hooks un kad tie jāizmanto. React tikai ieviesa āķus savā 16.8 versijā, taču tie ātri kļuvuši par būtisku bibliotēkas iezīmi.
Uzziniet visu par React Hooks pamatiem un atklājiet dažus paraugprakses to izmantošanai savās React lietojumprogrammās.
Kas ir reakcijas āķi?
React Hooks ļauj izmantot statusu un citas React funkcijas, neierakstot papildu kodu. Āķi ir lielisks veids, kā padarīt kodu lasāmāku un apkopējamāku.
Ir daži dažādi āķi programmā React, bet visbiežāk lietotās ir useState un useEffect. UseState āķis ļauj pievienot stāvokli jūsu komponentiem. Tas ir noderīgi, piemēram, sekojot līdzi lietotāja ievadei vai veidlapas izmaiņām. UseEffect āķis ļauj palaist funkciju ikreiz, kad komponents tiek renderēts. Tas ir noderīgi, piemēram, datu iegūšanai no API vai abonementa iestatīšanai.
Kad jums vajadzētu izmantot React Hooks?
Izmantojiet React Hooks ikreiz, kad komponentam ir jāpievieno papildu funkcionalitāte. Piemēram, ja jums ir nepieciešams sekot līdzi lietotāja ievadei, izmantojiet āķi useState. Ja jums ir jāiegūst dati no API, izmantojiet āķi useEffect. Jūs varat arī
izveidot pielāgotus āķus API izsaukumiem.Ja tikko sākāt lietot React, iespējams, jums vēl nav jāizmanto Hooks. Taču, veidojot sarežģītākas lietotnes, jūs atklāsit, ka Hooks ir lielisks veids, kā pievienot papildu funkcionalitāti jūsu komponentiem.
Paraugprakse ar React Hooks
Tagad, kad zināt, kas ir React Hooks un kad tos izmantot, parunāsim par dažiem paraugprakses piemēriem.
1. Tikai zvanu āķi no reaģēšanas funkcijām
React Hooks vajadzētu izsaukt tikai no React funkcijām. Ja mēģināsit izsaukt reakcijas āķus no klases komponenta, tiks parādīts kļūdas ziņojums.
Tas ir tāpēc, ka jūs varat izsaukt React Hook tikai no React funkcijas. Reakcijas funkcijas ir komponenti, kurus deklarējat ar funkcijas atslēgvārdu.
Šeit ir funkcijas React komponenta piemērs:
imports Reaģēt, { useState } no "reaģēt";funkcijuApp() {
konst [count, setCount] = useState(0);
atgriezties (
<div>
<lpp>{count}</lpp>
<poga onClick={() => setCount (count + 1)}>
Noklikšķiniet uz manis
</button>
</div>
);
}
Un šeit ir klases komponenta piemērs:
imports Reaģēt, { komponents } no "reaģēt";klasēApppagarinaKomponents{
stāvoklis = {
skaits: 0
};
render() {
atgriezties (
<div>
<lpp>{this.state.count}</lpp>
<poga onClick={() => this.setState({ skaits: this.state.count + 1 })}>
Noklikšķiniet uz manis
</button>
</div>
);
}
}
Pirmajā piemērā lietotnes komponents tiek deklarēts, izmantojot funkcijas atslēgvārdu, bet otrajā tiek izmantots klases atslēgvārds.
2. Izmantojiet tikai vienu useEffect Hook
Ja izmantojat useEffect āķi, katrai sastāvdaļai vajadzētu izmantot tikai vienu. Tas ir tāpēc, ka useEffect darbojas ikreiz, kad tiek renderēts komponents.
Ja jums ir vairāki useEffect āķi, tie visi darbosies ikreiz, kad komponents tiek renderēts. Tas var izraisīt negaidītas uzvedības un veiktspējas problēmas. Tālāk esošajā piemērā abi useEffects darbosies ikreiz, kad tiek renderēts lietotnes komponents.
imports Reaģēt, { useState, useEffect } no "reaģēt";funkcijuApp() {
konst [count, setCount] = useState(0);useEffect(() => {
console.log('Tas darbosies ikreiz, kad tiks renderēts lietotnes komponents!');
}, []);useEffect(() => {
console.log('Tas darbosies arī ikreiz, kad tiek renderēts lietotnes komponents!');
}, []);
atgriezties (
<div>
<lpp>{count}</lpp>
<poga onClick={() => setCount (count + 1)}>
Noklikšķiniet uz manis
</button>
</div>
);
}
Tā vietā, lai izmantotu vairākus useEffect āķus, varat izmantot vienu useEffect āķi un tajā ievietot visu savu kodu. Tālāk esošajā piemērā ikreiz, kad tiek renderēts lietotnes komponents, darbosies tikai viens useEffect āķis.
imports Reaģēt, { useState, useEffect } no "reaģēt";funkcijuApp() {
konst [count, setCount] = useState(0);useEffect(() => {
console.log('Tas darbosies ikreiz, kad tiks renderēts lietotnes komponents!');
console.log('Tas darbosies arī ikreiz, kad tiek renderēts lietotnes komponents!');
}, []);
atgriezties (
<div>
<lpp>{count}</lpp>
<poga onClick={() => setCount (count + 1)}>
Noklikšķiniet uz manis
</button>
</div>
);
}
Tas nozīmē, ka jūs varat izsaukt React Hooks tikai no pirmā piemēra. Ja mēģināsit izsaukt React Hooks no otrā piemēra, tiks parādīta kļūda.
3. Izmantojiet āķus augstākā līmenī
Viena no labākajām React Hooks praksēm ir to izmantošana augstākā līmenī. Jums vajadzētu izvairīties no āķu izmantošanas cilpu, nosacījumu vai ligzdotu funkciju iekšpusē. Piemēram, ja for cilpas ietvaros izmantojat statusu, katru reizi, kad cilpa tiek palaista, React izveidos jaunu stāvokļa mainīgo. Tas var izraisīt neparedzētu uzvedību.
imports Reaģēt, { useState } no "reaģēt";funkcijuApp() {
priekš (ļaut i = 0; es < 10; i++) {
// Nedari tā!
konst [count, setCount] = useState(0);
}
atgriezties (
<div>
<lpp>{count}</lpp>
<poga onClick={() => setCount (count + 1)}>
Noklikšķiniet uz manis
</button>
</div>
);
}
Iepriekš minētajā piemērā lietotnes komponents atveidos tikai skaitīšanu un pogu no cilpas pēdējās iterācijas. Tas ir tāpēc, ka React atjaunina tikai stāvokļa mainīgo no pēdējās iterācijas.
Tā vietā, lai cilpas iekšpusē izmantotu statusu, varat deklarēt stāvokļa mainīgo ārpus cilpas. Tādā veidā React izveidos tikai vienu stāvokļa mainīgo un attiecīgi atjauninās to.
imports Reaģēt, { useState } no "reaģēt";funkcijuApp() {
// Šis ir pareizais veids, kā izmantot useState cilpas iekšpusē
konst [count, setCount] = useState(0);priekš (ļaut i = 0; es < 10; i++) {
// ...
}
atgriezties (
<div>
<lpp>{count}</lpp>
<poga onClick={() => setCount (count + 1)}>
Noklikšķiniet uz manis
</button>
</div>
);
}
4. Pārmērīgi neizmantojiet āķus
React Hooks ir spēcīgs instruments, taču jums vajadzētu izvairīties no to pārmērīgas izmantošanas. Ja katrā komponentā izmantojat vairākus āķus, iespējams, tos lietojat pārmērīgi.
React Hooks ir visnoderīgākie, ja jums ir nepieciešams koplietot stāvokli starp vairākiem komponentiem. Neizmantojiet nevajadzīgus āķus, jo tie var padarīt jūsu kodu grūti nolasāmu, un tie var ietekmēt veiktspēju, ja to lietojat pārmērīgi.
Pievienojiet papildu funkcionalitāti, izmantojot React 18 āķus
Līdz ar React 18 izlaišanu ir pieejami jauni āķi. Katrs āķis ir raksturīgs noteiktai React funkcijai. Visu pieejamo āķu sarakstu varat atrast vietnē React. Bet visbiežāk izmantotie āķi joprojām ir useState un useEffect.
