Du vet kanskje allerede om React-kroker og til og med hvilke grunnleggende kroker rammeverket tilbyr. Hooks lar deg administrere tilstand og andre funksjoner uten å måtte skrive en klasse. De grunnleggende krokene er useState, useEffect, og brukKontekst. I denne artikkelen lærer du om noen ekstra kroker som legger til mer komplisert oppførsel.

De ekstra krokene du skal lære er brukRef og bruk Memo.

brukRef

De brukRef funksjonen returnerer et mutbart ref-objekt og initialiserer dets .strøm eiendom til det beståtte argumentet. Folk forveksler ofte bruken av brukRef krok med useState krok. Du kan instruere denne kroken til å holde referansen til en HTML-element. Ved å bruke denne referansen kan du enkelt manipulere det elementet.

De brukRef kroken har bare én egenskap: .strøm. React gjengir ikke siden på nytt når elementet endres. Den gjengis heller ikke på nytt hvis du endrer verdien av .strøm eiendom. La oss forstå bruken av denne kroken med et eksempel:

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





instagram viewer


eksporter standardfunksjon App() {
const count = useRef (null);
const [nummer, setNumber] = useState (0);
const checkNumber = () => {
if (count.current.value < 10) {
count.current.style.backgroundColor = "rød";
} annet {
count.current.style.backgroundColor = "grønn";
}
};
komme tilbake (


Skriv inn et tall større enn 10

ref={count}
type="tekst"
verdi={nummer}
onChange={(e) => setNumber (e.target.value)}
/>
 checkNumber()}>Klikk



);
}

I koden ovenfor endres fargen på inngangselementet i henhold til tallet du skriver inn i inntastingsboksen. Først tildeler den resultatet fra brukRef() hekte til telle variabel. Det er to elementer: input og knappen. Inndataelementet har verdien av Nummer og ref egenskapen til input-taggen er telle for å matche variabelen.

Når du klikker på knappen, vises Sjekk nummer() funksjonen kalles opp. Denne funksjonen sjekker om verdien av Nummer er større enn 10. Det da setter bakgrunnsfargen av inngangselementet ved å bruke count.current.style.bakgrunnsfarge eiendom.

I slekt: CSS Fundamentals: Arbeide med farger

bruk Memo

UseMemo-kroken vil beregne en bufret verdi på nytt når noen av avhengighetene endres. Denne optimaliseringen bidrar til å unngå dyre beregninger på hver gjengivelse.

Syntaksen til bruk Memo kroken er som følger:

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

For bedre forståelse, la oss vurdere et eksempel. Koden nedenfor veksler mellom fargene på to overskrifter. Den kaller useState krok for å holde styr på verdiene deres. En funksjon viser om fargen er varm eller kald i henhold til verdien. Før du returnerer statusen til fargen, er det en while-løkke som stopper i omtrent ett sekund. Dette er for demonstrasjonsformål, for å forklare fordelene med bruk Memo krok.

importere React, { useState, useMemo } fra 'react';
eksporter standardfunksjon App() {
const [color1, setColor1] = useState("blå");
const [color2, setColor2] = useState("grønn");
const toggleColor1 = () => {
returnere farge1 "blå"? setColor1("rød"): setColor1("blå");
};
const toggleColor2 = () => {
farge 2 "grønn"? setColor2("oransje"): setColor2("grønn");
};
const displayColor = () => {
var now = new Date().getTime();
while (ny Date().getTime() < nå + 1000);
returnere farge1 "blå"? "cool": "hot";
};
komme tilbake (


Tekst 1 farge: {color1}

Det er {displayColor()} farge

Veksle mellom farge
Tekst 2 farge: {color2}

Veksle mellom farge



);
}

Når du klikker på toggleButton1, bør du legge merke til en liten forsinkelse mens tilstanden endres. Legg merke til at det også er en forsinkelse når du klikker videre toggleButton2. Men dette bør ikke skje, siden pausen på ett sekund inntreffer i displayFarge. På denne siden skal knappene være i stand til å fungere uavhengig. For å oppnå dette kan du bruke bruk Memo krok.

Du må pakke inn displayFarge funksjon i bruk Memo hekte og passere farge 1 i avhengighetsmatrisen.

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

De bruk Memo kroken tar en funksjon og avhengighetene som parametere. De bruk Memo hook vil gjengi bare når en av avhengighetene endres. Det er nyttig i situasjoner når du må hente fra en API.

Hva du skal gjøre videre etter å ha lært Hooks

Kroker er en veldig kraftig funksjon og brukes ofte i React-prosjekter. De gir mye potensial for optimalisering. Du kan øve på kroker ved å bygge små prosjekter som skjemaer eller klokketellere.

Det er andre avanserte kroker som brukReducer, useLayoutEffect, og brukDebugValue. Du kan lære dem ved å referere til den offisielle React-dokumentasjonen.

Unnati Bamania (10 artikler publisert)

Unnati er en entusiastisk fullstack-utvikler. Hun elsker å bygge prosjekter med forskjellige programmeringsspråk. På fritiden elsker hun å spille gitar og er en matlagingsentusiast.

Mer fra Unnati Bamania