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:

App.jsxreturn (
  <div>
    <button>
      state click
    </button>
  </div>
);

Importáljuk a komponensbe a useState-ot:

App.jsximport { useState } from 'react';

És hozzunk létre egy state állapotot:

App.jsxconst [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:

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

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

App.jsxfunction 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:

App.jsximport { 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:

App.jsxconst 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:

App.jsx<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:

App.jsxfunction 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:

App.jsxfunction 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.