Hook-ul useRef pentru lucrul cu ref-uri în React

În această lecție vom lucra cu ref-uri. Pentru claritate, să analizăm funcționarea hook-ului useRef în comparație cu hook-ul useState.

Să creăm un component cu un buton:

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

Să importăm useState în component:

import { useState } from 'react';

Și să creăm state-ul state:

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

Acum să facem ca la click pe buton, state-ul nostru să crească cu 1. Vom afișa valoarea state-ului direct în textul butonului:

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

Să descriem funcția pentru procesarea click-ului pe butonul handleStateClick:

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

Să apăsăm butonul și vom vedea cum crește valoarea state-ului.

Acum să creăm componentul App, dar folosind nu state, ci un ref.

Pentru început, să importăm în component useRef:

import { useRef } from 'react';

Și să creăm ref-ul ref. Hook-ul useRef returnează un obiect ref cu o singură proprietate current, care ne va interesa în continuare. Să stabilim valoarea sa inițială la 0:

const ref = useRef(0);

Să atașăm butonului handler-ul click-ului. Amintiți-vă că trebuie să citim/să modificăm nu ref-ul în sine, ci proprietatea sa current:

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

Să adăugăm funcția pentru procesarea click-ului pe butonul nostru. Aici vom crește current cu 1, ca și în exemplul anterior cu state-ul. Spre deosebire de state, unde este necesară funcția setState pentru a-i modifica valoarea, cu proprietatea ref-ului lucrăm direct:

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

Acum să apăsăm butonul nostru. Și ce vedem? La click pe el, cum am avut inițial 0, așa rămâne și nu se schimbă.

Desigur, ați putea începe să vă îndoiți că valoarea se schimbă deloc. Să verificăm asta. Pentru aceasta, în funcția handler-ului de click să adăugăm încă un rând de cod cu afișarea valorii current în consolă:

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

Acum, deschizând consola în browser, să apăsăm din nou butonul și vom fi convinși că valoarea chiar se schimbă la fiecare click și nu există nici o înșelătorie.

Acum vedem că, spre deosebire de state, modificarea valorii ref-ului nu provoacă re-randarea componentului. De aceea, de fiecare dată în textul butonului vedem valoarea inițială 0.

Astfel, dacă datele dvs. sunt folosite pentru randare, atunci stocați-le în state, iar dacă nu aveți nevoie de randare, în acest caz, utilizarea ref-urilor poate fi mai eficientă.

Să presupunem că în componentul dvs. există un paragraf cu textul 'text' și un buton. Faceți astfel încât de fiecare dată când se dă click pe buton la sfârșitul textului paragrafului să se adauge un semn de exclamare. Realizați acest lucru cu ajutorul state-ului.

Creați un component App, dar în loc de state folosiți acum un ref. Asigurați-vă că atunci când se apasă butonul, textul paragrafului nu se va schimba. Adăugați și afișarea textului paragrafului în consolă, deschideți-o și asigurați-vă că de fapt textul se schimbă.