Du kender måske allerede til React-kroge og endda hvilke grundlæggende kroge rammerne tilbyder. Hooks giver dig mulighed for at administrere tilstand og andre funktioner uden at skulle skrive en klasse. De grundlæggende kroge er useState, useEffect, og brug kontekst. I denne artikel lærer du om nogle ekstra kroge, der tilføjer mere kompliceret adfærd.

De ekstra kroge, du vil lære, er brugRef og brug Memo.

brugRef

Det brugRef funktion returnerer et foranderligt ref-objekt og initialiserer dets .nuværende ejendom til det beståede argument. Folk forveksler ofte brugen af brugRef krog med useState krog. Du kan instruere denne krog til at holde referencen til en HTML element. Ved at bruge denne reference kan du nemt manipulere dette element.

Det brugRef krog har kun én egenskab i sig: .nuværende. React gengiver ikke siden, når dens element ændres. Det genrenderes heller ikke, hvis du ændrer værdien af ​​.nuværende ejendom. Lad os forstå brugen af ​​denne krog med et eksempel:

importere React, { useState, useRef } fra 'react';





instagram viewer


eksporter standardfunktion App() {
const count = useRef (nul);
const [tal, sætNumber] = useState (0);
const checkNumber = () => {
if (count.current.value < 10) {
count.current.style.backgroundColor = "rød";
} andet {
count.current.style.backgroundColor = "grøn";
}
};
Vend tilbage (


Indtast et tal større end 10

ref={count}
type="tekst"
værdi={tal}
onChange={(e) => sætNumber (e.target.value)}
/>
 checkNumber()}>Klik



);
}

I ovenstående kode ændres farven på input-elementet i henhold til det tal, du indtaster i input-boksen. Først tildeler den resultatet fra useRef() krog til tælle variabel. Der er to elementer: input og knappen. Indtastningselementet har værdien af nummer og ref egenskaben for input-tagget er tælle at matche variablen.

Når du klikker på knappen, vises checkNumber() funktion bliver kaldt. Denne funktion kontrollerer, om værdien af nummer er større end 10. Det så indstiller baggrundsfarven af input-elementet ved hjælp af tælle.nuværende.stil.baggrundsfarve ejendom.

Relaterede: CSS Fundamentals: Arbejde med farver

brug Memo

UseMemo hook vil genberegne en cachelagret værdi, når nogen af ​​dens afhængigheder ændres. Denne optimering hjælper med at undgå dyre beregninger på hver gengivelse.

Syntaksen for brug Memo krogen er som følger:

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

For bedre forståelse, lad os overveje et eksempel. Koden nedenfor skifter mellem farverne på to overskrifter. Det kalder useState krog for at holde styr på deres værdier. En funktion viser, om farven er varm eller kold i henhold til dens værdi. Før du returnerer status for farven, er der en while-løkke, der holder pause i cirka et sekund. Dette er til demonstrationsformål for at forklare fordelene ved brug Memo krog.

importer React, { useState, useMemo } fra 'react';
eksporter standardfunktion App() {
const [farve1, sætFarve1] = useState("blå");
const [farve2, sætFarve2] = useState("grøn");
const toggleColor1 = () => {
returnere farve1 "blå"? sætFarve1("rød"): sætFarve1("blå");
};
const toggleColor2 = () => {
farve 2 "grøn"? setColor2("orange"): setColor2("grøn");
};
const displayColor = () => {
var nu = new Date().getTime();
while (ny Date().getTime() < nu + 1000);
returnere farve1 "blå"? "cool": "hot";
};
Vend tilbage (


Tekst 1 farve: {color1}

Det er {displayColor()} farve

Skift farve
Tekst 2 farve: {color2}

Skift farve



);
}

Når du klikker på toggleknap1, bør du bemærke en lille forsinkelse, mens tilstanden ændres. Bemærk, at der også er en forsinkelse, når du klikker videre skifteknap2. Men dette bør ikke ske, da pausen på et sekund indtræffer i displayFarve. På denne side skal knapperne være i stand til at fungere uafhængigt. For at opnå dette kan du bruge brug Memo krog.

Du skal pakke ind displayFarve funktion i brug Memo hook og pass farve1 i afhængighedsarrayet.

const displayColor = useMemo(() => {
var nu = new Date().getTime();
while (ny Date().getTime() < nu + 1000);
returnere farve1 "blå"? "cool": "hot";
}, [farve1]);

Det brug Memo hook tager en funktion og afhængighederne som parametre. Det brug Memo hook gengives kun, når en af ​​dens afhængigheder ændres. Det er nyttigt i situationer, hvor du skal hente fra en API.

Hvad du skal gøre efter at have lært Hooks

Kroge er en meget kraftfuld funktion og bruges ofte i React-projekter. De giver et stort potentiale for optimering. Du kan øve kroge ved at bygge små projekter som formularer eller urtællere.

Der er andre avancerede kroge som brug Reducer, useLayoutEffect, og brug DebugValue. Du kan lære dem ved at henvise til den officielle React-dokumentation.

Unnati Bamania (10 artikler udgivet)

Unnati er en entusiastisk fuld stack-udvikler. Hun elsker at bygge projekter ved hjælp af forskellige programmeringssprog. I sin fritid elsker hun at spille guitar og er en madlavningsentusiast.

Mere fra Unnati Bamania