Lehet, hogy már ismeri a React horgokat, és még azt is, hogy milyen alapvető horgokat kínál a keretrendszer. A Hook-ok segítségével osztályozás nélkül kezelheti az állapotokat és egyéb funkciókat. Az alapvető horgok useState, useEffect, és useContext. Ebből a cikkből megtudhat néhány további akasztót, amelyek bonyolultabbá teszik a viselkedést.

A további horgok, amelyeket meg fog tanulni useRef és useMemo.

useRef

Az useRef függvény egy változtatható ref objektumot ad vissza, és inicializálja azt .jelenlegi tulajdonság az átadott érvhez. Az emberek gyakran összekeverik a használatát useRef akasztóval useState horog. Utasíthatja ezt a horgot, hogy tartsa az an hivatkozását HTML elem. Ezzel a hivatkozással könnyen manipulálhatja az elemet.

Az useRef a horognak csak egy tulajdonsága van: .jelenlegi. A React nem jeleníti meg újra az oldalt, ha eleme megváltozik. Az sem jelenik meg újra, ha megváltoztatja a .jelenlegi ingatlan. Nézzük meg ennek a horognak a használatát egy példán keresztül:

import React, { useState, useRef } in 'react';
alapértelmezett függvény exportálása App() {
const count = useRef (null);
const [szám, setNumber] = useState (0);
const checkNumber = () => {
if (count.current.value < 10) {
count.current.style.backgroundColor = "piros";
} más {
count.current.style.backgroundColor = "zöld";
}
};
Visszatérés (


Írjon be 10-nél nagyobb számot

ref={count}
type="text"
érték={szám}
onChange={(e) => setNumber (e.target.value)}
/>
 checkNumber()}>Kattintson



);
}

A fenti kódban a beviteli elem színe a beviteli mezőbe beírt szám szerint változik. Először is hozzárendeli az eredményt a useRef() horog a számol változó. Két eleme van: a bemenet és a gomb. A bemeneti elem értéke a szám és a ref a bemeneti címke tulajdonsága számol hogy megfeleljen a változónak.

Ha a gombra kattint, a checkNumber() függvény meghívásra kerül. Ez a függvény ellenőrzi, hogy a szám nagyobb, mint 10. Akkor az beállítja a háttérszínt a bemeneti elemet a count.current.style.backgroundColor ingatlan.

Összefüggő: A CSS alapjai: Munka a színekkel

useMemo

A useMemo hook újraszámolja a gyorsítótárazott értéket, ha bármely függősége megváltozik. Ez az optimalizálás segít elkerülni a költséges számításokat minden renderelésnél.

A szintaxis a useMemo a horog a következő:

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

A jobb megértés érdekében nézzünk meg egy példát. Az alábbi kód két címsor színét váltja. Úgy hívja a useState horog, hogy nyomon kövessék értékeikat. Egy függvény megmutatja, hogy a szín az értékének megfelelően meleg vagy hideg. Mielőtt visszaállítaná a szín állapotát, van egy while ciklus, amely körülbelül egy másodpercre megáll. Ez demonstrációs célokat szolgál, hogy elmagyarázza az előnyeit a useMemo horog.

import React, { useState, useMemo } in 'react';
alapértelmezett függvény exportálása App() {
const [szín1, setColor1] = useState("kék");
const [szín2, setColor2] = useState("zöld");
const toggleColor1 = () => {
szín1 "kék"? setColor1("piros"): setColor1("kék");
};
const toggleColor2 = () => {
color2 "zöld"? setColor2("narancs"): setColor2("zöld");
};
const displayColor = () => {
var now = new Date().getTime();
while (new Date().getTime() < now + 1000);
szín1 "kék"? "cool": "forró";
};
Visszatérés (


1. szöveg színe: {color1}

Ez {displayColor()} szín

Szín váltása
2. szöveg színe: {color2}

Szín váltása



);
}

Amikor rákattint toggleButton1, kis késést kell észlelnie, amíg az állapot megváltozik. Figyelje meg, hogy a gombra kattintva is késik toggleButton2. De ennek nem szabad megtörténnie, mivel az egy másodperces szünet beáll displayColor. Ezen az oldalon a gomboknak képesnek kell lenniük önálló működésre. Ennek eléréséhez használhatja a useMemo horog.

Be kell csomagolni a displayColor funkció a useMemo horog és passz szín1 a függőségi tömbben.

const displayColor = useMemo(() => {
var now = new Date().getTime();
while (new Date().getTime() < now + 1000);
szín1 "kék"? "cool": "forró";
}, [szín1]);

Az useMemo hook paraméterként egy függvényt és a függőségeket vesz fel. Az useMemo hook csak akkor jelenik meg, ha az egyik függősége megváltozik. Olyan helyzetekben hasznos, amikor API-ból kell letöltenie.

Mi a következő lépés a horgok megtanulása után

A horgok nagyon hatékony funkció, és gyakran használják a React projektekben. Rengeteg optimalizálási lehetőséget kínálnak. Gyakorolhatja a horgokat kis projektek, például űrlapok vagy óraszámlálók építésével.

Vannak más fejlett horgok is, mint pl useReducer, useLayoutEffect, és useDebugValue. Megtudhatja őket a hivatalos React dokumentációból.

Unnati Bamania (10 publikált cikk)

Unnati egy lelkes full stack fejlesztő. Szeret projekteket építeni különféle programozási nyelvek használatával. Szabadidejében szeret gitározni, és rajong a főzésért.

Továbbiak Unnati Bamaniától