Reactда рефлар билан ишлаш учун useRef хуки

Ушбу дарсда биз рефлар билан ишлаймиз. Тушунарли бўлиши учун 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);
}

Тугмани босиб кўриб, стейт қийматининг orthishini курамиз.

Энди эса, стейт ишлатмай, балки реф ишлатан холда App компонентини яратайлик.

Аввало, компонентга useRef ни импорт қиламиз:

import { useRef } from 'react';

Ва ref рефни яратамиз. useRef хуки ўзининг натижаси сифатида ягона current хусусиятига эга бўлган реф объектини қайтаради, бу эса кейинчалик биз учун қизиқарли бўлади. Унинг бошлангич қийматини 0 га тенг қиламиз:

const ref = useRef(0);

Тугмага клик ишловчисини ўрнатамиз. Эсда тутингиз, биз ref нинг ўзини эмас, балки унинг current хусусиятини ўқишимиз/ўзгартиришимиз керак:

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

Тугма босилшини ишловчи функцияни қўшамиз. Биз стейтдаги каби current ни 1 га оширамиз. Стейтдан фарқли ўларок, унинг қийматини ўзгартириш учун setState функцияси талаб қилинмайди, балки биз реф хусусияти билан тўғридан-тўғри ишлаймиз:

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

Энди тугманимизни босайлик. Ва нимани курамиз? Унга босганда, бошлангич 0 қиймати ўзгармай қолаверди.

Сиз, албатта, қиймат ўзгармаяптими делан шубхалангиз келиши мумкин. Келинг, текшириб кўрамиз. Бунинг учун клик ишловчи функцияга current қийматини консолга чиқарувчи яна бир қator код қўшамиз:

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

Энди эса, браузерда консолни очиб, яна тугмани босиш орқали ҳар бир босилганда қиймат ҳақиқатан ўзгаришига ишонч ҳосил қиламиз.

Энди биз курамизки, стейтдан фарқли ўларок, реф қийматининг ўзгариши компонентнинг қайта рендер бўлишига сабаб бўлмайди. Шу сабабдирки, биз ҳар доим тугма матнида бошлангич 0 қийматини кўрамиз.

Шунинг учун, агар сизнинг маълумотларингиз рендерлаш учун ишлатилса, уларни стейтда сақланг, агар рендерлаш шарт эмас бўлса, ундай ҳолда рефлардан фойдаланиш самаралироқ бўлиши мумкин.

Сизнинг компонентингизда 'text' матни билан абзац ва тугма мавжуд бўлсин. Тугма босилганда ҳар сафар абзац матинининг охирига ҳар бир undov белгиси қўшиладиган қилинг. Буни стейт ёрдамида амалга оширинг.

App компонентини яратинг, лекин стейт ўрнига энди рефдан фойдаланинг. Тугма босилганда абзац матни ўзгармаслигига ишонч ҳосил қилинг. Абзац матнини консолга чиқаришни ҳам қўшинг, уни очинг ва матн ҳақиқатан ўзгаришини кўринг.