Možda već znate za React kuke, pa čak i koje osnovne kuke okvir nudi. Hooks vam omogućuje upravljanje stanjem i drugim značajkama bez potrebe za pisanjem klase. Osnovne udice su useState, useEffect, i useContext. U ovom članku ćete saznati o nekim dodatnim udicama koje dodaju kompliciranije ponašanje.

Dodatne kuke koje ćete učiti su korištenjeRef i useMemo.

korištenjeRef

The korištenjeRef funkcija vraća promjenjivi ref objekt i inicijalizira njegov .Trenutno svojstvo prenesenog argumenta. Ljudi često brkaju upotrebu korištenjeRef kuka sa useState kuka. Možete uputiti ovu udicu da drži referencu HTML element. Koristeći ovu referencu, možete lako manipulirati tim elementom.

The korištenjeRef kuka ima samo jedno svojstvo u sebi: .Trenutno. React ne renderira stranicu kada se promijeni njezin element. Niti se ponovno prikazuje ako promijenite vrijednost .Trenutno imovine. Razumijemo upotrebu ove kuke na primjeru:

import React, { useState, useRef } iz 'react';
izvoz zadana funkcija App() {

instagram viewer


const count = useRef (null);
const [broj, setNumber] = useState (0);
const checkNumber = () => {
if (count.current.value < 10) {
count.current.style.backgroundColor = "crveno";
} ostalo {
count.current.style.backgroundColor = "zeleno";
}
};
povratak (


Unesite broj veći od 10

ref={count}
type="text"
vrijednost={broj}
onChange={(e) => setNumber (e.target.value)}
/>
 checkNumber()}>Kliknite



);
}

U gornjem kodu, boja elementa za unos mijenja se prema broju koji unesete u okvir za unos. Prvo, dodjeljuje rezultat iz useRef() kuka za računati varijabla. Postoje dva elementa: ulaz i gumb. Ulazni element ima vrijednost broj i, the ref svojstvo ulazne oznake je računati da odgovara varijabli.

Kada kliknete na gumb, broj provjere() funkcija se poziva. Ova funkcija provjerava je li vrijednost broj veći je od 10. To onda postavlja boju pozadine ulaznog elementa pomoću count.current.style.backgroundColor imovine.

Povezano: Osnove CSS-a: rad s bojama

useMemo

UseMemo kuka ponovno će izračunati predmemoriranu vrijednost kada se bilo koja od njegovih ovisnosti promijeni. Ova optimizacija pomaže izbjeći skupe izračune pri svakom renderiranju.

Sintaksa od useMemo kuka je kako slijedi:

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

Za bolje razumijevanje, razmotrimo primjer. Kod u nastavku mijenja boje dvaju naslova. Poziva se useState kuka za praćenje njihovih vrijednosti. Funkcija pokazuje je li boja vruća ili hladna prema svojoj vrijednosti. Prije vraćanja statusa boje, postoji petlja while koja pauzira otprilike jednu sekundu. Ovo je u svrhu demonstracije, kako bi se objasnila korist od useMemo kuka.

import React, { useState, useMemo } iz 'react';
izvoz zadana funkcija App() {
const [boja1, setColor1] = useState("plavo");
const [color2, setColor2] = useState("zeleno");
const toggleColor1 = () => {
povratna boja1 "plava"? setColor1("crveno"): setColor1("plavo");
};
const toggleColor2 = () => {
boja 2 "zelena"? setColor2("narančasta"): setColor2("zeleno");
};
const displayColor = () => {
var sada = novi datum().getTime();
dok (novi Datum().getTime() povratna boja1 "plava"? "cool": "vruće";
};
povratak (


Boja teksta 1: {color1}

To je boja {displayColor()}

Prebaci boju
Boja teksta 2: {color2}

Prebaci boju



);
}

Kada kliknete na preklopni gumb1, trebali biste primijetiti malo kašnjenje dok se stanje mijenja. Primijetite da postoji i kašnjenje kada kliknete na prekidač2. Ali to se ne bi smjelo dogoditi, budući da se pauza od jedne sekunde događa u boja zaslona. Na ovoj stranici, gumbi bi trebali biti sposobni djelovati neovisno. Da biste to postigli, možete koristiti useMemo kuka.

Morate zamotati boja zaslona funkcija u useMemo zakači i dodaj boja 1 u nizu ovisnosti.

const displayColor = useMemo(() => {
var sada = novi datum().getTime();
dok (novi Datum().getTime() povratna boja1 "plava"? "cool": "vruće";
}, [boja1]);

The useMemo hook uzima funkciju i ovisnosti kao parametre. The useMemo hook će renderirati samo kada se promijeni jedna od njegovih ovisnosti. Korisno je u situacijama kada morate dohvaćati iz API-ja.

Što učiniti sljedeće nakon učenja udica

Hooks su vrlo moćna značajka i obično se koriste u React projektima. Pružaju puno potencijala za optimizaciju. Možete vježbati udice izradom malih projekata poput obrazaca ili brojača satova.

Postoje i druge napredne udice poput koristiteReducer, useLayoutEffect, i useDebugValue. Možete ih naučiti pozivajući se na službenu React dokumentaciju.

Unnati Bamania (Objavljeno 10 članaka)

Unnati je entuzijastičan full stack programer. Voli graditi projekte koristeći različite programske jezike. U slobodno vrijeme voli svirati gitaru i ljubiteljica je kuhanja.

Više od Unnati Bamanije