Iespējams, jūs jau zināt par React āķiem un pat to, kādus pamata āķus sistēma piedāvā. Āķi ļauj pārvaldīt stāvokli un citas funkcijas, nerakstot klasi. Pamata āķi ir useState, useEffect, un useContext. Šajā rakstā jūs uzzināsit par dažiem papildu āķiem, kas padara darbību sarežģītāku.

Papildu āķi, kurus jūs apgūsit, ir useRef un izmantotMemo.

useRef

The useRef funkcija atgriež mainīgu ref objektu un inicializē to .strāva īpašums pieņemtajam argumentam. Cilvēki bieži sajauc lietošanu useRef āķis ar useState āķis. Varat norādīt šim āķim turēt atsauci uz an HTML elements. Izmantojot šo atsauci, varat viegli manipulēt ar šo elementu.

The useRef āķim ir tikai viens īpašums: .strāva. React nerenderē lapu atkārtoti, kad mainās tās elements. Tas netiek arī atkārtoti renderēts, ja maināt vērtību.strāva īpašums. Izpratīsim šī āķa izmantošanu ar piemēru:

importēt React, { useState, useRef } no 'react';
eksportēt noklusējuma funkciju App() {
const count = useRef (nulle);
const [skaitlis, setNumber] = useState (0);





instagram viewer


const checkNumber = () => {
if (count.current.value < 10) {
count.current.style.backgroundColor = "sarkans";
} cits {
count.current.style.backgroundColor = "zaļš";
}
};
atgriezties (


Ievadiet skaitli, kas ir lielāks par 10

ref={count}
type="text"
vērtība={skaitlis}
onChange={(e) => setNumber (e.target.value)}
/>
 checkNumber()}> Noklikšķiniet



);
}

Iepriekš minētajā kodā ievades elementa krāsa mainās atkarībā no skaitļa, ko ievadāt ievades lodziņā. Pirmkārt, tas piešķir rezultātu no useRef() āķis pie skaitīt mainīgs. Ir divi elementi: ievade un poga. Ievades elementam ir vērtība numuru un, ref ievades taga īpašība ir skaitīt lai atbilstu mainīgajam.

Noklikšķinot uz pogas, checkNumber() funkcija tiek izsaukta. Šī funkcija pārbauda, ​​vai vērtība numuru ir lielāks par 10. Tā tad iestata fona krāsu ievades elementu, izmantojot count.current.style.backgroundColor īpašums.

Saistīts: CSS pamati: darbs ar krāsām

izmantotMemo

UseMemo āķis pārrēķinās kešatmiņā saglabāto vērtību, kad mainīsies kāda no tā atkarībām. Šī optimizācija palīdz izvairīties no dārgiem aprēķiniem katrā renderēšanā.

Sintakse izmantotMemo āķis ir šāds:

const memoizedValue = useMemo(() => computeExpensiveValue (a), [a]);

Lai labāk izprastu, aplūkosim piemēru. Tālāk esošais kods pārslēdz divu virsrakstu krāsas. To sauc par useState āķis, lai izsekotu savām vērtībām. Funkcija parāda, vai krāsa ir karsta vai auksta atbilstoši tās vērtībai. Pirms krāsas statusa atgriešanas notiek brīža cilpa, kas apstājas uz aptuveni vienu sekundi. Tas ir demonstrācijas nolūkos, lai izskaidrotu priekšrocības izmantotMemo āķis.

importēt React, { useState, useMemo } no 'react';
eksportēt noklusējuma funkciju App() {
const [color1, setColor1] = useState("zils");
const [color2, setColor2] = useState("zaļš");
const toggleColor1 = () => {
atgriezt color1 "zilu"? setColor1("sarkans"): setColor1("zils");
};
const toggleColor2 = () => {
krāsa2 "zaļa"? setColor2 ("oranžs"): setColor2 ("zaļš");
};
const displayColor = () => {
var tagad = new Datums().getTime();
while (new Date().getTime() < tagad + 1000);
atgriezt color1 "zilu"? "vēss": "karsts";
};
atgriezties (


1. teksta krāsa: {color1}

Tā ir {displayColor()} krāsa

Pārslēgt krāsu
2. teksta krāsa: {color2}

Pārslēgt krāsu



);
}

Kad jūs noklikšķiniet uz ToggleButton1, jums vajadzētu pamanīt nelielu aizkavi, kamēr stāvoklis mainās. Ņemiet vērā, ka, noklikšķinot uz pogas, ir arī aizkave ToggleButton2. Bet tam nevajadzētu notikt, jo notiek vienas sekundes pauze displeja krāsa. Šajā lapā pogām jāspēj darboties neatkarīgi. Lai to panāktu, varat izmantot izmantotMemo āķis.

Jums ir nepieciešams iesaiņot displeja krāsa funkcija izmantotMemo āķis un piespēle krāsa 1 atkarību masīvā.

const displayColor = useMemo(() => {
var tagad = new Datums().getTime();
while (new Date().getTime() < tagad + 1000);
atgriezt color1 "zilu"? "vēss": "karsts";
}, [krāsa1]);

The izmantotMemo āķis izmanto funkciju un atkarības kā parametrus. The izmantotMemo hook tiks renderēts tikai tad, kad mainīsies kāda no tā atkarībām. Tas ir noderīgi situācijās, kad jums ir jāielādē no API.

Ko darīt pēc āķu apguves

Āķi ir ļoti spēcīga funkcija, un tos parasti izmanto React projektos. Tie nodrošina lielu optimizācijas potenciālu. Jūs varat praktizēt āķus, veidojot mazus projektus, piemēram, veidlapas vai pulksteņu skaitītājus.

Ir arī citi uzlaboti āķi, piemēram useReducer, useLayoutEffect, un useDebugValue. Jūs varat tos uzzināt, atsaucoties uz oficiālo React dokumentāciju.

Unnati Bamania (10 publicēti raksti)

Unnati ir entuziasma pilnas kaudzes izstrādātājs. Viņai patīk veidot projektus, izmantojot dažādas programmēšanas valodas. Brīvajā laikā viņa mīl spēlēt ģitāru un ir ēst gatavošanas entuziaste.

Vairāk no Unnati Bamania