Huku useRef për të punuar me ref në React

Në këtë mësim do të punojmë me ref. Për qartësi le të shqyrtojmë funksionimin e hukut useRef në krahasim me hukun useState.

Le të krijojmë një komponent me një buton:

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

Le të importojmë në komponent useState:

import { useState } from 'react';

Dhe le të krijojmë state state:

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

Dhe tani le të bëjmë që me klikim në buton state ynë të rritet me 1. Vlerën e state do ta shfaqim direkt në tekstin e butonit:

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

Le të përshkruajmë funksionin për trajtimin e klikimit në butonin handleStateClick:

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

Le të klikojmë butonin dhe do të shohim se si rritet vlera e state.

Dhe tani le të krijojmë komponentin App, por duke përdorur jo state, por ref.

Për fillim, le të importojmë në komponent useRef:

import { useRef } from 'react';

Dhe le të krijojmë ref ref. Si rezultat i tij, huku useRef kthen një objekt ref me një vetëm property current, e cila do të na interesojë në të ardhmen. Le të vendosim vlerën e saj fillestare në 0:

const ref = useRef(0);

Le të vendosim në buton trajtuesin e klikimit. Mbani mend se ne duhet të lexojmë/ndryshojmë jo vetë ref, por property-në e tij current:

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

Le të shtojmë funksionin për trajtimin e klikimit në butonin tonë. Këtu do të rrisim current me 1, si në shembullin e mëparshëm me state. Ndryshe nga state, ku kërkohet funksioni setState për ndryshimin e vlerës së tij, me property-në e ref ne punojmë direkt:

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

Tani le të klikojmë butonin tonë. Dhe çfarë shohim? Me klikim në të, siç ishte fillimisht 0, ashtu nuk ndryshon.

Ju, sigurisht, mund të filloni të dyshoni që vlera në përgjithësi ndryshon. Le ta kontrollojmë këtë. Për këtë në funksionin e trajtuesit të klikimit le të shtojmë edhe një rresht kod me shfaqjen e vlerës current në konsol:

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

Dhe tani, duke hapur konsolën në shfletues, përsëri të klikojmë butonin dhe do të bindemi që vlera me të vërtetë ndryshon me çdo klikim dhe nuk ka mashtrim.

Tani ne shohim se ndryshe nga state, ndryshimi i vlerës së ref nuk shkakton renderimin e komponentit. Prandaj ne çdo herë në tekstin e butonit shohim vlerën fillestare 0.

Kështu, nëse të dhënat tuaja përdoren për renderim, atëherë ruajini ato në state, por nëse nuk keni nevojë për renderim, në këtë rast përdorimi i ref mund të jetë më efikas.

Le të ketë në komponentin tuaj një paragraf me tekst 'text' dhe një buton. Bëni që çdo herë me klikim në buton në fund të tekstit të paragrafit të shtohet një pikëçuditëse. Bëni këtë duke përdorur state.

Krijoni një komponent App, por në vend të state tani përdorni ref. Binduni që me klikim në buton teksti i paragrafit nuk do ndryshojë. Shtoni gjithashtu shfaqjen e tekstit të paragrafit në konsol, hapeni atë dhe binduni që në fakt teksti ndryshon.