Хукот useRef за работа со рефови во React

На оваа лекција ќе работиме со рефови. За поголема јасност, да ја разгледаме работата на хукот useRef во споредба со хукот useState.

Да создадеме компонента со копче:

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

Да ја импортираме во компонентата useState:

import { useState } from 'react';

И да креираме state state:

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

А сега да направиме така што при клик на копчето нашиот state да се зголемува за 1. Вредноста на state-от ќе ја прикажуваме директно во текстот на копчето:

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

Да ја опишеме функцијата за обработка на клик на копчето handleStateClick:

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

Да кликнеме на копчето и ќе видиме како расте вредноста на state-от.

А сега да креираме компонента App, но користејќи не state, туку ref.

За почеток, да ја импортираме во компонентата useRef:

import { useRef } from 'react';

И да креираме ref ref. Како резултат, хукот useRef враќа објект на ref со единствено својство current, кое ќе нè интересира во продолжение. Да ја поставиме неговата почетна вредност на 0:

const ref = useRef(0);

Да додадеме обработувач на клик на копчето. Запомнете, дека треба да читаме/менуваме не самиот ref, туку неговото својство current:

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

Да додадеме функција за обработка на клик на нашето копче. Овде ќе ја зголемуваме current за 1, како и во претходниот пример со state. За разлика од state, каде што е потребна функција setState за промена на неговата вредност, со својството на ref-от работиме директно:

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

Сега да кликнеме на нашето копче. И што гледаме? При клик на него, како што беше првично 0, така и не се менува.

Вие, секако, може да се сомневате во тоа дали вредноста воопшто се менува. Да го провериме тоа. За таа цел во функцијата на обработувачот на клик да додадеме уште една линија код со приказ на вредноста current во конзола:

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

А сега, отворајќи ја конзолата во прелистувачот, повторно да кликнеме на копчето и ќе се увериме дека вредноста навистина се менува при секој клик и нема никаква измама.

Сега гледаме дека за разлика од state, промената на вредноста на ref не предизвикува рендерирање на компонентата. Затоа секој пат во текстот на копчето ја гледаме почетната вредност 0.

Со тоа, ако вашите податоци се користат за рендерирање, тогаш чувајте ги во state, а ако не ви треба рендерирање, во таков случај употребата на ref-ови може да биде поефикасна.

Нека во вашата компонента има параграф со текст 'text' и копче. Направете така што секој пат при клик на копчето на крајот од текстот на параграфот да се додава извичник. Направете го ова со користење на state.

Создадете компонента App, но наместо state сега користете ref. Уверете се дека при клик на копчето текстот на параграфот нема да се менува. Додадете исто така приказ на текстот на параграфот во конзола, отворете ја и уверете се дека всушност текстот се менува.