A useRef hook a ref-ek kezeléséhez Reactben

Ezen a leckén ref-ekkel fogunk dolgozni. Az áttekinthetőség kedvéért elemezzük a useRef hook működését összehasonlítva a useState hookkal.

Hozzunk létre egy komponenst egy gombbal:

return (
	<div>
		<button>
			state click
		</button>
	</div>
);

Importáljuk a komponensbe a useState-ot:

import { useState } from 'react';

És hozzunk létre egy state állapotot:

const [state, setState] = useState(0);

Most tegyük úgy, hogy a gombra kattintáskor a state értéke 1-gyel növekedjen. Az állapot értékét közvetlenül a gomb szövegében jelenítjük meg:

<button onClick={handleStateClick}>
	state click: {state}
</button>

Írjuk meg a gomb kattintásának kezelésére szolgáló handleStateClick függvényt:

function handleStateClick() {
	setState(state + 1);
}

Kattintsunk a gombra néhányszor és lássuk, hogyan nő az állapot értéke.

Most hozzunk létre egy App komponenst, de ne állapotot, hanem ref-et használjunk.

Először is importáljuk a komponensbe a useRef-ot:

import { useRef } from 'react';

És hozzunk létre egy ref ref-et. A useRef hook egy ref objektummal tér vissza, aminek egyetlen current tulajdonsága van, ami minket a továbbiakban érdekelni fog. Állítsuk be a kezdő értékét 0-ra:

const ref = useRef(0);

Rendeljük hozzá a gombhoz a kattintáskezelőt. Ne feledjük, hogy nem magát a ref-et kell olvasnunk/módosítanunk, hanem annak current tulajdonságát:

<button onClick={handleRefClick}>
	ref click: {ref.current}
</button>

Adjunk hozzá egy függvényt a gomb kattintásának kezeléséhez. Itt a current értékét 1-gyel növeljük, ahogyan az előző, állapotot használó példában is tettük. Az állapottal ellentétben, ahol egy setState függvényre van szükség az érték megváltoztatásához, a ref tulajdonságával közvetlenül dolgozunk:

function handleRefClick() {
	ref.current = ref.current + 1;
}

Most kattintsunk a gombunkra. És mit látunk? Amikor rákattintunk, a 0 érték, ami kezdetben volt, nem változik.

Természetesen kezdhetünk kételkedni abban, hogy az érték egyáltalán változik-e. Ellenőrizzük le ezt. Ehhez adjunk hozzá a kattintáskezelő függvényhez még egy kódsort, ami a current értékét kiírja a konzolra:

function handleRefClick() {
	ref.current = ref.current + 1;
	console.log('ref click: ' + ref.current);
}

Most, miután megnyitottuk a böngésző konzolját, ismét kattintsunk a gombra és győződjünk meg arról, hogy az érték valóban változik minden egyes kattintáskor, és nincs semmiféle csalás.

Most látjuk, hogy az állapottal ellentétben a ref értékének megváltoztatása nem vált ki a komponens újrarajzolását. Ezért minden alkalommal a gomb szövegében a kezdő 0 értéket látjuk.

Így, ha az adataidat a megjelenítéshez használod, akkor tárold őket állapotban, ha viszont nincs szükséged újrarajzolásra, akkor a ref-ek használata hatékonyabb megoldás lehet.

Tegyük fel, hogy a komponensedben van egy bekezdés 'text' szöveggel és egy gomb. Állítsd be, hogy minden alkalommal, amikor a gombra kattintasz, a bekezdés szövegéhez egy felkiáltó jel kerüljön a végére. Old meg ezt állapot használatával.

Hozz létre egy App komponenst, de most állapot helyett használj ref-et. Győződj meg arról, hogy a gomb megnyomásakor a bekezdés szövege nem fog változni. Adj hozzá a bekezdés szövegének kiírását a konzolra is, nyisd meg a konzolt és győződj meg arról, hogy valójában a szöveg változik.