Hook useRef ref-ებთან მუშაობისთვის React-ში

ამ გაკვეთილზე ჩვენ ვიმუშავებთ ref-ებთან. სიცხადისთვის მოდით გავაანალიზოთ hook-ის useRef მუშაობა hook-თან 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. hook 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. დარწმუნდით, რომ ღილაკზე დაჭერისას ტექსტის აბზაცი არ შეიცვლება. ასევე დაამატეთ აბზაცის ტექსტის გამოტანა კონსოლში, გახსენით ის და დარწმუნდით, რომ სინამდვილეში ტექსტი იცვლება.