React-та useRef хукі Ref-пен жұмыс істеу үшін

Бұл сабақта біз ref-пен жұмыс істейміз. Түсінікті болу үшін useRef хукінің жұмысын useState хукімен салыстырып қарастырайық.

Түймесі бар компонент жасайық:

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

Компонентке useState импорттайық:

import { useState } from 'react';

Және state стейтін жасайық:

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

Енді түймені басқанда біздің state 1-ге өссе болсын. Стейт мәнін түйменің мәтінінде-ақ шығарайық:

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

Түймені басу үшін handleStateClick функциясын сипаттайық:

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

Түймешікті бірнеше рет басып, стейт мәнінің қалай өсетінін көрейік.

Енді App компонентін стейт емес, ref қолданып жасайық.

Алдымен, компонентке useRef импорттайық:

import { useRef } from 'react';

Және ref ref-ін жасайық. useRef хукі нәтиже ретінде бізді болашақта қызықтыратын жалғыз current қасиеті бар ref нысанын қайтарады. Оның бастапқы мәнін 0 деп белгілейік:

const ref = useRef(0);

Түймешікке басу обработтігін қосамыз. ref-тің өзін емес, оның current қасиетін оқуымдыз/өзгертуіміз керек екенін есте сақтаңыз:

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

Түймені басу үшін функция қосамыз. Стейттегідей, біз current-ті 1-ге өсіреміз. Стейттен айырмашылығы, онда оның мәнін өзгерту үшін setState функциясы қажет, ал ref қасиетімен біз тікелей жұмыс істейміз:

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

Енді түймешікті басайық. Біз не көреміз? Оны басқан сайын, бастапқы 0 өзгермейді.

Сіз, әрине, мән өзгере ме деген күмәндануыңыз мүмкін. Мұны тексерейік. Ол үшін басу обработтігі функциясына current мәнін консольге шығаратын тағы бір код жолын қосамыз:

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

Енді, браузердегі консольді ашып, түймешікті қайтадан басып, әр басу кезінде мән шынымен өзгеретініне көз жеткізейік.

Енді біз стейттен айырмашылығы, ref мәнінің өзгеруі компоненттің рендерингін тудырмайтынын көреміз. Сондықтан біз әр уақытта түйменің мәнінде бастапқы 0 мәнін көреміз.

Осылайша, егер сіздің деректеріңіз рендеринг үшін қолданылса, оларды стейтте сақтаңыз, ал егер рендеринг қажет болмаса, онда ref қолдану тиімдірек болуы мүмкін.

Сіздің компонентіңізде 'text' мәтіні бар абзац және түйме болсын. Түймені әр басқан сайын абзац мәтінінің соңына леп белгісі қосылатын етіп жасаңыз. Мұны стейт арқылы жасаңыз.

App компонентін жасаңыз, бірақ енді стейттің орнына ref қолданыңыз. Түймені басқанда абзац мәтінінің өзгермейтініне көз жеткізіңіз. Сонымен қатар абзац мәтінін консольге шығарыңыз, оны ашып, мәтін шынымен өзгеретініне көз жеткізіңіз.