Možno už viete o hákoch React a dokonca o tom, aké základné háčiky framework ponúka. Háčiky vám umožňujú spravovať stav a ďalšie funkcie bez toho, aby ste museli písať triedu. Základné háčiky sú useState, useEffecta použite kontext. V tomto článku sa dozviete o niektorých ďalších háčikoch, ktoré pridávajú komplikovanejšie správanie.

Ďalšie háčiky, ktoré sa naučíte, sú useRef a useMemo.

useRef

The useRef funkcia vracia meniteľný ref objekt a inicializuje ho .aktuálny vlastnosti k odovzdanému argumentu. Ľudia si často mýlia používanie useRef hák s useState háčik. Môžete dať pokyn tomuto háku, aby držal odkaz na HTML prvok. Pomocou tohto odkazu môžete jednoducho manipulovať s týmto prvkom.

The useRef hák má v sebe iba jednu vlastnosť: .aktuálny. React znova nevykreslí stránku, keď sa zmení jej prvok. Ani sa nevykreslí, ak zmeníte hodnotu .prúd nehnuteľnosť. Poďme pochopiť použitie tohto háku na príklade:

import React, { useState, useRef } z 'react';
exportovať predvolenú funkciu App() {





instagram viewer


const count = useRef (null);
const [číslo, setNumber] = useState (0);
const checkNumber = () => {
if (count.current.value < 10) {
count.current.style.backgroundColor = "červená";
} inak {
count.current.style.backgroundColor = "zelená";
}
};
vrátiť (


Zadajte číslo väčšie ako 10

ref={count}
type="text"
hodnota={číslo}
onChange={(e) => setNumber (e.target.value)}
/>
 checkNumber()}>Kliknite



);
}

Vo vyššie uvedenom kóde sa farba vstupného prvku mení podľa čísla, ktoré zadáte do vstupného poľa. Najprv priradí výsledok z useRef() hák na počítať premenlivý. Existujú dva prvky: vstup a tlačidlo. Vstupný prvok má hodnotu číslo a, ref vlastnosť vstupnej značky je počítať aby sa zhodovala s premennou.

Keď kliknete na tlačidlo, checkNumber() funkcia sa volá. Táto funkcia kontroluje, či je hodnota číslo je väčší ako 10. To potom nastaví farbu pozadia vstupného prvku pomocou count.current.style.backgroundColor nehnuteľnosť.

Súvisiace: Základy CSS: Práca s farbami

useMemo

Hák useMemo prepočíta hodnotu uloženú vo vyrovnávacej pamäti, keď sa zmení ktorákoľvek z jeho závislostí. Táto optimalizácia pomáha vyhnúť sa drahým výpočtom pri každom renderi.

Syntax súboru useMemo háčik je nasledovný:

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

Pre lepšie pochopenie si uveďme príklad. Nižšie uvedený kód prepína farby dvoch nadpisov. Volá to useState háčik na sledovanie ich hodnôt. Funkcia ukazuje, či je farba horúca alebo studená podľa jej hodnoty. Pred obnovením stavu farby je tu slučka while, ktorá sa zastaví približne na jednu sekundu. Toto slúži na demonštračné účely, na vysvetlenie výhod useMemo háčik.

import React, { useState, useMemo } z 'react';
exportovať predvolenú funkciu App() {
const [color1, setColor1] = useState("modra");
const [color2, setColor2] = useState("zelena");
const toggleColor1 = () => {
vrátiť farbu 1 "modrú"? setColor1("červená"): setColor1("modrá");
};
const toggleColor2 = () => {
farba 2 "zelená"? setColor2("oranžová"): setColor2("zelená");
};
const displayColor = () => {
var now = new Date().getTime();
while (new Date().getTime() < now + 1000);
vrátiť farbu 1 "modrú"? "cool": "horúce";
};
vrátiť (


Farba textu 1: {color1}

Je to farba {displayColor()}

Prepnúť farbu
Farba textu 2: {color2}

Prepnúť farbu



);
}

Keď kliknete na prepínač1, mali by ste si všimnúť mierne oneskorenie, kým sa stav zmení. Všimnite si, že pri kliknutí na položku je tiež oneskorenie prepínač2. To by sa však nemalo stať, pretože nastáva sekundová pauza displayColor. Na tejto stránke by tlačidlá mali fungovať nezávisle. Aby ste to dosiahli, môžete použiť useMemo háčik.

Potrebujete zabaliť displayColor funkciu v useMemo hák a prejsť farba1 v poli závislostí.

const displayColor = useMemo(() => {
var now = new Date().getTime();
while (new Date().getTime() < now + 1000);
vrátiť farbu 1 "modrú"? "cool": "horúce";
}, [farba1]);

The useMemo hook berie funkciu a závislosti ako parametre. The useMemo hook sa vykreslí iba vtedy, keď sa zmení jedna z jeho závislostí. Je to užitočné v situáciách, keď musíte načítať z API.

Čo robiť ďalej po učení sa háčikov

Háčiky sú veľmi výkonná funkcia a bežne sa používajú v projektoch React. Poskytujú veľký potenciál na optimalizáciu. Háčiky si môžete precvičiť stavaním malých projektov, ako sú formuláre alebo počítadlá hodín.

Existujú aj ďalšie pokročilé háčiky ako useReducer, useLayoutEffecta useDebugValue. Môžete sa ich naučiť pomocou oficiálnej dokumentácie React.

Unnati Bamania (10 publikovaných článkov)

Unnati je nadšený vývojár plných zásobníkov. Miluje vytváranie projektov pomocou rôznych programovacích jazykov. Vo voľnom čase rada hrá na gitare a je nadšencom varenia.

Viac od Unnati Bamania