Du kanske redan känner till React-krokar och till och med vilka grundläggande krokar som ramverket erbjuder. Hooks låter dig hantera status och andra funktioner utan att behöva skriva en klass. De grundläggande krokarna är useState, useEffect, och användContext. I den här artikeln kommer du att lära dig om några ytterligare krokar som lägger till mer komplicerat beteende.

De extra krokarna som du kommer att lära dig är användRef och användMemo.

användRef

De användRef funktion returnerar ett föränderligt ref-objekt och initierar dess .nuvarande egendom till det godkända argumentet. Människor förväxlar ofta användningen av användRef krok med useState krok. Du kan instruera denna krok att hålla referensen till en HTML-element. Med hjälp av denna referens kan du enkelt manipulera det elementet.

De användRef kroken har bara en egenskap: .nuvarande. React återrenderar inte sidan när dess element ändras. Inte heller återrenderas det om du ändrar värdet på .nuvarande fast egendom. Låt oss förstå användningen av denna krok med ett exempel:

importera React, { useState, useRef } från 'react';
exportera standardfunktion App() {
const count = useRef (null);
const [number, setNumber] = useState (0);
const checkNumber = () => {
if (count.current.value < 10) {
count.current.style.backgroundColor = "röd";
} annat {
count.current.style.backgroundColor = "grön";
}
};
lämna tillbaka (


Ange ett nummer större än 10

ref={count}
type="text"
värde={nummer}
onChange={(e) => setNumber (e.target.value)}
/>
 checkNumber()}>Klicka



);
}

I koden ovan ändras färgen på inmatningselementet enligt numret du anger i inmatningsrutan. Först tilldelar den resultatet från useRef() krok till räkna variabel. Det finns två element: ingång och knappen. Ingångselementet har värdet av siffra och den ref egenskapen för input-taggen är räkna för att matcha variabeln.

När du klickar på knappen visas kolla numret() funktionen anropas. Den här funktionen kontrollerar om värdet på siffra är större än 10. Det då ställer in bakgrundsfärgen av inmatningselementet med hjälp av count.current.style.bakgrundsfärg fast egendom.

Relaterad: CSS Fundamentals: Arbeta med färger

användMemo

UseMemo-kroken kommer att beräkna om ett cachat värde när något av dess beroenden ändras. Denna optimering hjälper till att undvika dyra beräkningar på varje rendering.

Syntaxen för användMemo kroken är som följer:

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

För bättre förståelse, låt oss överväga ett exempel. Koden nedan växlar färgerna på två rubriker. Den kallar useState krok för att hålla reda på sina värderingar. En funktion visar om färgen är varm eller kall enligt dess värde. Innan du återställer färgens status, finns det en while-loop som pausar i ungefär en sekund. Detta är i demonstrationssyfte, för att förklara fördelarna med användMemo krok.

importera React, { useState, useMemo } från 'react';
exportera standardfunktion App() {
const [color1, setColor1] = useState("blå");
const [color2, setColor2] = useState("grön");
const toggleColor1 = () => {
returnera färg1 "blå"? setColor1("röd"): setColor1("blå");
};
const toggleColor2 = () => {
färg 2 "grön"? setColor2("orange"): setColor2("grön");
};
const displayColor = () => {
var nu = new Date().getTime();
while (new Date().getTime() < now + 1000);
returnera färg1 "blå"? "cool": "het";
};
lämna tillbaka (


Text 1 färg: {color1}

Det är färgen {displayColor()}

Växla färg
Text 2 färg: {color2}

Växla färg



);
}

När du klickar på toggleButton1, bör du märka en liten fördröjning medan tillståndet ändras. Observera att det också är en fördröjning när du klickar på toggleButton2. Men detta bör inte hända, eftersom pausen på en sekund inträffar i displayfärg. På den här sidan ska knapparna kunna agera oberoende. För att uppnå detta kan du använda användMemo krok.

Du måste linda in displayfärg funktion i användMemo kroka och passera färg1 i beroendematrisen.

const displayColor = useMemo(() => {
var nu = new Date().getTime();
while (new Date().getTime() < now + 1000);
returnera färg1 "blå"? "cool": "het";
}, [färg1]);

De användMemo hook tar en funktion och beroenden som parametrar. De användMemo hook återges endast när ett av dess beroenden ändras. Det är användbart i situationer när du måste hämta från ett API.

Vad du ska göra härnäst efter att ha lärt dig krokar

Krokar är en mycket kraftfull funktion och används ofta i React-projekt. De ger mycket potential för optimering. Du kan träna krokar genom att bygga små projekt som formulär eller klockräknare.

Det finns andra avancerade krokar som användReducer, useLayoutEffect, och användDebugValue. Du kan lära dig dem genom att hänvisa till den officiella React-dokumentationen.

Unnati Bamania (10 publicerade artiklar)

Unnati är en entusiastisk fullstack-utvecklare. Hon älskar att bygga projekt med hjälp av olika programmeringsspråk. På fritiden älskar hon att spela gitarr och är en matlagningsentusiast.

Mer från Unnati Bamania