Хук useRef барои кор бо рефҳо дар React

Дар ин дарс мо бо рефҳо кор хоҳем кард. Барои равшанӣ биёед кори хуки 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-ро эҷод кунем, аммо истифода набаран аз стейт, балки аз реф.

Аввалан, ба компонент 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 ба консол:

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

Ва акнун, консолро дар браузер кушодан, боз ба тугма клик кунед ва боварӣ ҳосил кунем, ки қимат дар ҳар як клик воқеан тағир меёбад ва ҳеҷ фиребе нест.

Акнун мебинем, ки дар фарқият аз стейт, тағири қимати реф рендеринги компонентро ба вуҷуд намеорад. Аз ин сабаб мо ҳар дафъа дар матни тугма қимати ибтидоии 0-ро мебинем.

Пас, агар маълумоти шумо барои рендеринг истифода мешаванд, пас онҳоро дар стейт нигоҳ доред, ва агар ба шумо рендеринг лозим нест, дар ин ҳолат истифодаи рефҳо метавонад самараноктар бошад.

Бигзор дар компоненти шумо абзасе бо матни 'text' ва тугма бошад. Чунон кунед, ки ҳар дафъа дар рӯи клик ба тугма ба охири матни абзас аломати сифат илова шавад. Инро бо ёрии стейт анҷом диҳед.

Компоненти App-ро эҷод кунед, аммо ба ҷои стейт акнун рефро истифода баред. Боварӣ ҳосил кунед, ки дар пахши тугма матни абзас нахоҳад тағир ёбад. Ҳамчунин чопи матни абзасро ба консол илова кунед, онро кушоед ва боварӣ ҳосил кунед, ки дар асл матн тағир меёбад.