Hook useRef za delo z refi v React

V tej lekciji bomo delali z refi. Za boljšo predstavo si oglejmo delovanje huka useRef v primerjavi z hukom useState.

Ustvarimo komponento z gumbom:

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

Uvozimo useState v komponento:

import { useState } from 'react';

In ustvarimo state state:

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

Zdaj pa naredimo tako, da ob kliku na gumb naš state povečamo za 1. Vrednost state bomo prikazali neposredno v besedilu gumba:

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

Opisimo funkcijo za obdelavo klika na gumb handleStateClick:

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

Klikajmo na gumb in opazujmo, kako narašča vrednost state.

Zdaj pa ustvarimo komponento App, vendar z uporabo refa namesto state.

Za začetek uvozimo useRef v komponento:

import { useRef } from 'react';

In ustvarimo ref ref. Hook useRef vrne objekt refa z eno samo lastnostjo current, ki nas bo v nadaljevanju zanimala. Nastavimo njegovo začetno vrednost na 0:

const ref = useRef(0);

Dodajmo obravnavalec klika na gumb. Ne pozabite, da moramo brati/spremeniti ne sam ref, ampak njegovo lastnost current:

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

Dodajmo funkcijo za obdelavo klika na naš gumb. Tukaj bomo povečali current za 1, tako kot v prejšnjem primeru s state. V nasprotju s state, kjer za spreminjanje njegove vrednosti potrebujemo funkcijo setState, z lastnostjo refa delamo neposredno:

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

Zdaj klikajmo na naš gumb. In kaj vidimo? Ob kliku nanj, kot smo imeli na začetku 0, tako ostane in se ne spreminja.

Seveda lahko začnete dvomiti, da se vrednost sploh spreminja. Preverimo to. Za to v funkciji obravnavalca klika dodajmo še vrstico kode z izpisom vrednosti current v konzolo:

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

Zdaj pa, ko odpremo konzolo v brskalniku, znova klikajmo na gumb in se prepričajmo, da se vrednost res spreminja ob vsakem kliku in ni nobene prevare.

Zdaj vidimo, da za razliko od state, spreminjanje vrednosti refa ne povzroči ponovnega upodabljanja komponente. Zato vsakič v besedilu gumba vidimo začetno vrednost 0.

Torej, če se vaši podatki uporabljajo za upodabljanje, jih hranite v state, če pa upodabljanje ni potrebno, v tem primeru lahko uporaba refov postane bolj učinkovita.

Naj bo v vaši komponenti odstavek z besedilom 'text' in gumb. Naredite tako, da ob vsakem kliku na gumb na konec besedila odstavka doda klicaj. To naredite z uporabo state.

Ustvarite komponento App, vendar namesto state zdaj uporabite ref. Prepričajte se, da se ob pritisku na gumb besedilo odstavka ne bo spreminjalo. Dodajte tudi izpis besedila odstavka v konzolo, jo odprite in se prepričajte, da se besedilo dejansko spreminja.