Morda že veste o kljukicah React in celo o tem, katere osnovne kljuke ponuja okvir. Kavlji vam omogočajo upravljanje stanja in drugih funkcij, ne da bi morali pisati razred. Osnovne kljuke so useState, useEffect, in useContext. V tem članku boste izvedeli nekaj dodatnih kavljev, ki dodajo bolj zapleteno vedenje.

Dodatne kljuke, ki se jih boste naučili, so uporabaRef in uporabite Memo.

uporabaRef

The uporabaRef funkcija vrne spremenljiv ref objekt in ga inicializira .tok lastnost posredovanega argumenta. Ljudje pogosto zamenjujejo uporabo uporabaRef kavelj s useState kavelj. Temu kljukicu lahko naročite, da zadrži referenco an element HTML. S to referenco lahko preprosto manipulirate s tem elementom.

The uporabaRef kavelj ima v sebi samo eno lastnost: .tok. React ne upodablja strani, ko se njen element spremeni. Prav tako se ne upodablja znova, če spremenite vrednost .tok lastnine. Razumimo uporabo tega kaveljca s primerom:

import React, { useState, useRef } iz 'react';
izvozi privzeto funkcijo App() {





instagram viewer


const count = useRef (nič);
const [število, setNumber] = useState (0);
const checkNumber = () => {
if (count.current.value < 10) {
count.current.style.backgroundColor = "rdeča";
} drugo {
count.current.style.backgroundColor = "zelena";
}
};
vrnitev (


Vnesite število, večje od 10

ref={count}
type="besedilo"
vrednost={število}
onChange={(e) => setNumber (e.target.value)}
/>
 checkNumber()}>Kliknite



);
}

V zgornji kodi se barva vnosnega elementa spreminja glede na številko, ki jo vnesete v vnosno polje. Najprej dodeli rezultat iz useRef() kavelj na šteti spremenljivka. Obstajata dva elementa: vnos in gumb. Vhodni element ima vrednost številko in ref lastnost vhodne oznake je šteti da se ujema s spremenljivko.

Ko kliknete na gumb, se kontrolna številka() funkcija se pokliče. Ta funkcija preveri, ali je vrednost številko je večja od 10. Potem nastavi barvo ozadja vhodnega elementa z uporabo count.current.style.backgroundColor lastnine.

Povezano: Osnove CSS: delo z barvami

uporabite Memo

Kavelj useMemo bo znova izračunal predpomnjeno vrednost, ko se spremeni katera koli njegova odvisnost. Ta optimizacija pomaga preprečiti drage izračune pri vsakem upodabljanju.

Sintaksa uporabite Memo kavelj je naslednji:

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

Za boljše razumevanje si oglejmo primer. Spodnja koda preklopi barve dveh naslovov. To kliče useState kavelj za spremljanje njihovih vrednosti. Funkcija prikazuje, ali je barva vroča ali hladna glede na njeno vrednost. Pred vrnitvijo statusa barve je zanka while, ki se ustavi za približno eno sekundo. To je v predstavitvene namene, da pojasnimo koristi uporabite Memo kavelj.

import React, { useState, useMemo } iz 'react';
izvozi privzeto funkcijo App() {
const [color1, setColor1] = useState("modra");
const [color2, setColor2] = useState("zelena");
const toggleColor1 = () => {
vrniti barvo1 "modra"? setColor1("rdeča"): setColor1("modra");
};
const toggleColor2 = () => {
barva 2 "zelena"? setColor2("oranžna"): setColor2("zelena");
};
const displayColor = () => {
var zdaj = nov datum().getTime();
medtem ko (nov datum().getTime() < zdaj + 1000);
vrniti barvo1 "modra"? "kul": "vroče";
};
vrnitev (


Barva 1. besedila: {color1}

Je barva {displayColor()}

Preklopi barvo
Barva 2. besedila: {color2}

Preklopi barvo



);
}

Ko kliknete na preklopni gumb1, bi morali opaziti rahlo zamudo, ko se stanje spremeni. Upoštevajte, da obstaja tudi zamuda, ko kliknete preklopni gumb2. Toda to se ne bi smelo zgoditi, saj pride do enosekundne pavze barva zaslona. Na tej strani morajo biti gumbi sposobni delovati neodvisno. Da bi to dosegli, lahko uporabite uporabite Memo kavelj.

Zaviti morate barva zaslona funkcijo v uporabite Memo kavelj in podaj barva 1 v nizu odvisnosti.

const displayColor = useMemo(() => {
var zdaj = nov datum().getTime();
medtem ko (nov datum().getTime() < zdaj + 1000);
vrniti barvo1 "modra"? "kul": "vroče";
}, [barva1]);

The uporabite Memo hook vzame funkcijo in odvisnosti kot parametre. The uporabite Memo kavelj bo upodobljen le, ko se spremeni ena od njegovih odvisnosti. Uporabno je v primerih, ko morate pridobiti iz API-ja.

Kaj storiti naprej po učenju kavljev

Kavlji so zelo zmogljiva funkcija in se pogosto uporabljajo v projektih React. Zagotavljajo veliko možnosti za optimizacijo. Kavlje lahko vadite tako, da zgradite majhne projekte, kot so obrazci ali števci ur.

Obstajajo tudi druge napredne kljuke, kot so uporabite Reducer, useLayoutEffect, in useDebugValue. Naučite se jih lahko s sklicevanjem na uradno React dokumentacijo.

Unnati Bamania (10 objavljenih člankov)

Unnati je navdušen razvijalec polnega sklada. Rada gradi projekte z uporabo različnih programskih jezikov. V prostem času rada igra kitaro in je kuharska navdušenka.

Več od Unnati Bamania