Galbūt jau žinote apie „React“ kabliukus ir net kokius pagrindinius kabliukus siūlo sistema. Kabliukai leidžia valdyti būseną ir kitas funkcijas, nereikia rašyti klasės. Pagrindiniai kabliukai yra useState, naudojimoEfektas, ir useContext. Šiame straipsnyje sužinosite apie kai kuriuos papildomus kabliukus, kurie padaro sudėtingesnį elgesį.

Papildomi kabliukai, kurių išmoksite useRef ir naudotiMemo.

useRef

The useRef funkcija grąžina kintamą ref objektą ir inicijuoja jį .dabartinė nuosavybė priimtam argumentui. Žmonės dažnai painioja naudojimą useRef kabliukas su useState kabliukas. Galite nurodyti šiam kabliui laikyti nuorodą į HTML elementas. Naudodami šią nuorodą galite lengvai manipuliuoti tuo elementu.

The useRef kabliukas turi tik vieną savybę: .dabartinė. React neperteikia puslapio, kai pasikeičia jo elementas. Taip pat jis neperteikiamas iš naujo, jei pakeičiate .srovė nuosavybė. Supraskime šio kabliuko naudojimą pateikdami pavyzdį:

importuoti React, { useState, useRef } iš 'react';





instagram viewer


eksportuoti numatytąją funkciją App() {
const count = useRef (null);
const [numeris, setNumber] = useState (0);
const checkNumber = () => {
if (count.current.value < 10) {
count.current.style.backgroundColor = "raudona";
} Kitas {
count.current.style.backgroundColor = "žalia";
}
};
grįžti (


Įveskite skaičių, didesnį nei 10

ref={count}
type="tekstas"
vertė={skaičius}
onChange={(e) => setNumber (e.target.value)}
/>
 checkNumber()}>Spustelėkite



);
}

Aukščiau pateiktame kode įvesties elemento spalva keičiasi pagal skaičių, kurį įvedėte įvesties laukelyje. Pirma, jis priskiria rezultatą iš useRef() kablys prie skaičiuoti kintamasis. Yra du elementai: įvestis ir mygtukas. Įvesties elementas turi reikšmę numerį ir ref įvesties žymos savybė yra skaičiuoti kad atitiktų kintamąjį.

Kai paspausite mygtuką, checkNumber() funkcija iškviečiama. Ši funkcija patikrina, ar reikšmė yra numerį yra didesnis nei 10. Tai tada nustato fono spalvą įvesties elementą naudodami count.current.style.backgroundColor nuosavybė.

Susijęs: CSS pagrindai: darbas su spalvomis

naudotiMemo

„useMemo“ kabliukas perskaičiuos talpykloje esančią vertę, kai pasikeis bet kuri jo priklausomybė. Šis optimizavimas padeda išvengti brangių kiekvieno atvaizdavimo skaičiavimų.

Sintaksė naudotiMemo kabliukas yra toks:

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

Norėdami geriau suprasti, panagrinėkime pavyzdį. Žemiau pateiktas kodas perjungia dviejų antraščių spalvas. Tai vadina useState kabliukas sekti savo vertybes. Funkcija parodo, ar spalva karšta ar šalta pagal jos vertę. Prieš grąžinant spalvos būseną, yra trumpoji kilpa, kuri sustoja maždaug vienai sekundei. Tai skirta demonstravimo tikslais, siekiant paaiškinti naudą naudotiMemo kabliukas.

importuoti React, { useState, useMemo } iš 'react';
eksportuoti numatytąją funkciją App() {
const [spalva1, setColor1] = useState("mėlyna");
const [color2, setColor2] = useState("žalia");
const toggleColor1 = () => {
grąžinti 1 spalvą „mėlyna“? setColor1("raudona"): setColor1("mėlyna");
};
const toggleColor2 = () => {
2 spalva "žalia"? setColor2 ("oranžinė"): setColor2 ("žalia");
};
const displayColor = () => {
var now = new Data().getTime();
while (new Date().getTime() < now + 1000);
grąžinti 1 spalvą „mėlyna“? "kietas": "karštas";
};
grįžti (


1 teksto spalva: {color1}

Tai {displayColor()} spalva

Perjungti spalvą
2 teksto spalva: {color2}

Perjungti spalvą



);
}

Kai paspausite toggleButton1, turėtumėte pastebėti nedidelį vėlavimą, kol būsena pasikeičia. Atkreipkite dėmesį, kad spustelėjus taip pat yra delsa ToggleButton2. Tačiau tai neturėtų atsitikti, nes įvyksta vienos sekundės pauzė ekrano spalva. Šiame puslapyje mygtukai turėtų veikti nepriklausomai. Norėdami tai pasiekti, galite naudoti naudotiMemo kabliukas.

Jums reikia apvynioti ekrano spalva funkcija naudotiMemo užkabinti ir perduoti spalva 1 priklausomybių masyve.

const displayColor = useMemo(() => {
var now = new Data().getTime();
while (new Date().getTime() < now + 1000);
grąžinti 1 spalvą „mėlyna“? "kietas": "karštas";
}, [1 spalva]);

The naudotiMemo kabliukas naudoja funkciją ir priklausomybes kaip parametrus. The naudotiMemo kabliukas bus atvaizduojamas tik pasikeitus vienai iš jo priklausomybių. Tai naudinga tais atvejais, kai reikia gauti iš API.

Ką daryti toliau, išmokus kabliukų

Kabliukai yra labai galinga funkcija ir dažniausiai naudojami „React“ projektuose. Jie suteikia daug optimizavimo galimybių. Galite praktikuoti kabliukus kurdami nedidelius projektus, pvz., formas ar laikrodžių skaitiklius.

Yra ir kitų pažangių kabliukų kaip useReducer, useLayoutEffect, ir useDebugValue. Juos galite sužinoti naudodamiesi oficialia React dokumentacija.

Unnati Bamania (10 straipsnių paskelbta)

Unnati yra entuziastingas „full stack“ kūrėjas. Jai patinka kurti projektus naudodama įvairias programavimo kalbas. Laisvalaikiu ji mėgsta groti gitara ir yra maisto gaminimo entuziastė.

Daugiau iš Unnati Bamania