Možná už víte o hácích React a dokonce o tom, jaké základní háčky framework nabízí. Háky vám umožňují spravovat stav a další funkce, aniž byste museli psát třídu. Základní háčky jsou useState, useEffect, a použití kontextu. V tomto článku se dozvíte o některých dalších hácích, které přidávají složitější chování.

Další háčky, které se naučíte, jsou useRef a použít Memo.

useRef

The useRef funkce vrací proměnlivý ref objekt a inicializuje jej .proud vlastnost k předanému argumentu. Lidé si často pletou použití useRef hák s useState háček. Můžete dát pokyn tomuto háku, aby držel odkaz na an HTML prvek. Pomocí tohoto odkazu můžete snadno manipulovat s tímto prvkem.

The useRef hák má v sobě pouze jednu vlastnost: .proud. React znovu nevykreslí stránku, když se změní její prvek. Ani se znovu nevykreslí, pokud změníte hodnotu .proud vlastnictví. Pojďme pochopit použití tohoto háku na příkladu:

import React, { useState, useRef } z 'react';
exportovat výchozí funkci App() {
const count = useRef (null);





instagram viewer


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


Zadejte číslo větší než 10

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



);
}

Ve výše uvedeném kódu se barva vstupního prvku mění podle čísla, které zadáte do vstupního pole. Nejprve přiřadí výsledek z useRef() háček na počet variabilní. Existují dva prvky: vstup a tlačítko. Vstupní prvek má hodnotu číslo a, ref vlastnost vstupního tagu je počet aby odpovídala proměnné.

Když kliknete na tlačítko, checkNumber() funkce se zavolá. Tato funkce kontroluje, zda je hodnota číslo je větší než 10. To pak nastaví barvu pozadí vstupního prvku pomocí count.current.style.backgroundColor vlastnictví.

Příbuzný: Základy CSS: Práce s barvami

použít Memo

Hák useMemo přepočítá hodnotu uloženou v mezipaměti, když se změní jakákoliv z jeho závislostí. Tato optimalizace pomáhá vyhnout se drahým výpočtům na každém renderu.

Syntaxe použít Memo háček je následující:

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

Pro lepší pochopení uveďme příklad. Níže uvedený kód přepíná barvy dvou nadpisů. Volá to useState háček, abyste měli přehled o svých hodnotách. Funkce ukazuje, zda je barva horká nebo studená podle její hodnoty. Před návratem do stavu barvy existuje smyčka while, která se přibližně na jednu sekundu zastaví. Toto je pro demonstrační účely, pro vysvětlení výhod použít Memo háček.

import React, { useState, useMemo } z 'react';
exportovat výchozí funkci App() {
const [barva1, setColor1] = useState("modra");
const [barva2, setColor2] = useState("zelena");
const toggleColor1 = () => {
vrátit barvu1 "modrou"? setColor1("červená"): setColor1("modrá");
};
const toggleColor2 = () => {
barva2 "zelená"? setColor2("oranžová"): setColor2("zelená");
};
const displayColor = () => {
var now = new Date().getTime();
while (new Date().getTime() < now + 1000);
vrátit barvu1 "modrou"? "cool": "horký";
};
vrátit se (


Barva textu 1: {color1}

Je to barva {displayColor()}

Přepnout barvu
Barva textu 2: {color2}

Přepnout barvu



);
}

Když kliknete na přepínací tlačítko1, měli byste zaznamenat mírné zpoždění při změně stavu. Všimněte si, že je zde také zpoždění, když kliknete na toggleButton2. To by se však nemělo stávat, protože nastává sekundová pauza displayColor. Na této stránce by tlačítka měla fungovat samostatně. Chcete-li toho dosáhnout, můžete použít použít Memo háček.

Musíte zabalit displayColor funkce v použít Memo hák a pas barva1 v poli závislostí.

const displayColor = useMemo(() => {
var now = new Date().getTime();
while (new Date().getTime() < now + 1000);
vrátit barvu1 "modrou"? "cool": "horký";
}, [barva1]);

The použít Memo hook bere funkci a závislosti jako parametry. The použít Memo hook se vykreslí pouze tehdy, když se změní jedna z jeho závislostí. Je to užitečné v situacích, kdy musíte načíst z API.

Co dělat dál po učení háčků

Háčky jsou velmi výkonnou funkcí a běžně se používají v projektech React. Poskytují velký potenciál pro optimalizaci. Háčky si můžete procvičit stavbou malých projektů, jako jsou formuláře nebo počítadla hodin.

Existují další pokročilé háčky jako useReducer, useLayoutEffect, a useDebugValue. Můžete se je naučit odkazem na oficiální dokumentaci React.

Unnati Bamania (10 zveřejněných článků)

Unnati je nadšený vývojář plného balíčku. Ráda vytváří projekty pomocí různých programovacích jazyků. Ve volném čase ráda hraje na kytaru a je nadšená do vaření.

Více od Unnati Bamania