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';
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)}
/>
);
}
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
2 teksto spalva: {color2}
);
}
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.
Nemokami kursai retai būna tokie išsamūs ir naudingi, tačiau radome keletą puikių „React“ kursų, kurie padės jums pradėti teisingai.
Skaitykite toliau
- Programavimas
- Programavimas
- Reaguoti
- JavaScript
- Interneto kūrimas
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ė.
Prenumeruokite mūsų naujienlaiškį
Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. knygų ir išskirtinių pasiūlymų!
Norėdami užsiprenumeruoti, spustelėkite čia