Võib-olla teate juba Reacti konksudest ja isegi sellest, milliseid põhikonkse raamistik pakub. Konksud võimaldavad teil hallata olekut ja muid funktsioone ilma klassi kirjutamata. Põhilised konksud on useState, useEffect, ja useContext. Sellest artiklist saate teada mõnede täiendavate konksude kohta, mis muudavad käitumise keerulisemaks.

Täiendavad konksud, mida õpite, on useRef ja kasutaMemot.

useRef

The useRef Funktsioon tagastab muutuva ref-objekti ja lähtestab selle .praegune omadus läbitud argumendile. Inimesed ajavad kasutamise sageli segadusse useRef konksuga useState konks. Saate juhendada seda konksu hoidma viidet an HTML element. Seda viidet kasutades saate selle elemendiga hõlpsasti manipuleerida.

The useRef konksul on ainult üks omadus: .praegune. React ei renderda lehte uuesti, kui selle element muutub. Samuti ei renderda seda uuesti, kui muudate .praegune vara. Vaatame selle konksu kasutamist näite abil:

import React, { useState, useRef } alates 'react';
ekspordi vaikefunktsioon App() {

instagram viewer


const count = useRef (null);
const [number, setNumber] = useState (0);
const checkNumber = () => {
if (count.current.value < 10) {
count.current.style.backgroundColor = "punane";
} muu {
count.current.style.backgroundColor = "roheline";
}
};
tagasi (


Sisestage arv, mis on suurem kui 10

ref={count}
type="text"
väärtus={number}
onChange={(e) => setNumber (e.target.value)}
/>
 checkNumber()}> Klõpsake



);
}

Ülaltoodud koodis muutub sisendelemendi värv vastavalt sisestuskasti sisestatud numbrile. Esiteks määrab see tulemuse useRef() konks külge loendama muutuv. Seal on kaks elementi: sisend ja nupp. Sisendelemendi väärtus on number ja viide sisendsildi omadus on loendama muutuja sobitamiseks.

Kui klõpsate nupul, kuvatakse checkNumber() funktsioon kutsutakse välja. See funktsioon kontrollib, kas väärtus on number on suurem kui 10. See siis määrab taustavärvi sisendelemendi kohta kasutades count.current.style.backgroundColor vara.

Seotud: CSS-i põhialused: värvidega töötamine

kasutaMemot

UseMemo konks arvutab vahemällu salvestatud väärtuse ümber, kui selle sõltuvus muutub. See optimeerimine aitab vältida kulukaid arvutusi iga renderduse puhul.

Süntaks kasutaMemot konks on järgmine:

const memoizedValue = useMemo(() => arvutaKallisVäärtus (a), [a]);

Parema mõistmise huvides vaatleme näidet. Allolev kood vahetab kahe pealkirja värve. See kutsub useState konks oma väärtustel silma peal hoida. Funktsioon näitab, kas värv on vastavalt väärtusele kuum või külm. Enne värvi oleku tagastamist toimub ajasilmus, mis peatub umbes üheks sekundiks. See on tutvustamise eesmärgil, et selgitada selle eeliseid kasutaMemot konks.

import React, { useState, useMemo } alates 'react';
ekspordi vaikefunktsioon App() {
const [värv1, setColor1] = useState("sinine");
const [värv2, setColor2] = useState("roheline");
const toggleColor1 = () => {
tagastada värv1 "sinine"? setColor1("punane"): setColor1("sinine");
};
const toggleColor2 = () => {
värv2 "roheline"? setColor2("oranž"): setColor2("roheline");
};
const displayColor = () => {
var now = new Date().getTime();
while (new Date().getTime() < now + 1000);
tagastada värv1 "sinine"? "lahe": "kuum";
};
tagasi (


1. teksti värv: {color1}

See on {displayColor()} värvi

Värvi sisse- ja väljalülitamine
2. teksti värv: {color2}

Värvi sisse- ja väljalülitamine



);
}

Kui klõpsate toggleButton1, peaksite oleku muutumisel märkama väikest viivitust. Pange tähele, et ka sellel klõpsamisel esineb viivitus toggleButton2. Kuid seda ei tohiks juhtuda, kuna toimub ühesekundiline paus ekraanivärv. Sellel lehel peaksid nupud saama iseseisvalt toimida. Selle saavutamiseks võite kasutada kasutaMemot konks.

Peate pakkima ekraanivärv funktsioonis kasutaMemot konks ja sööt värv 1 sõltuvuste massiivi.

const displayColor = useMemo(() => {
var now = new Date().getTime();
while (new Date().getTime() < now + 1000);
tagastada värv1 "sinine"? "lahe": "kuum";
}, [värv1]);

The kasutaMemot konks võtab parameetritena funktsiooni ja sõltuvused. The kasutaMemot hook renderdatakse ainult siis, kui üks selle sõltuvustest muutub. See on kasulik olukordades, kus peate hankima API-st.

Mida teha pärast konksude õppimist

Konksud on väga võimas funktsioon ja neid kasutatakse tavaliselt Reacti projektides. Need pakuvad palju optimeerimispotentsiaali. Saate harjutada konkse, ehitades väikeseid projekte, nagu vormid või kellalugejad.

On ka teisi täiustatud konkse nagu useReducer, useLayoutEffect, ja useDebugValue. Saate neid õppida, viidates ametlikule Reacti dokumentatsioonile.

Unnati Bamania (10 avaldatud artiklit)

Unnati on entusiastlik täispinu arendaja. Talle meeldib ehitada projekte, kasutades erinevaid programmeerimiskeeli. Vabal ajal armastab ta kitarri mängida ja on kokandushuviline.

Veel Unnati Bamanialt