React-də Reflərlə Işləmək üçün useRef Hook-u

Bu dərsdə biz reflərlə işləyəcəyik. Aydınlıq üçün gəlin useRef hook-unun işini useState hook-u ilə müqayisədə nəzərdən keçirək.

Gəlin düyməsi olan bir komponent yaradaq:

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

Komponentə useState import edək:

import { useState } from 'react';

Və state state-ni yaradaq:

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

İndi isə elə edək ki, düyməyə kliklədikdə bizim state 1 vahid artsın. State-in dəyərini birbaşa düymənin mətnində çıxardacağıq:

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

Düyməyə klik üçün emal funksiyası handleStateClick təsvir edək:

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

Gəlin düyməyə bir neçə dəfə klik edək və state-in dəyərinin necə artdığını görək.

İndi gəlin App komponentini state istifadə etməyərək, ref istifadə edərək yaradaq.

Əvvəlcə, komponentə useRef import edək:

import { useRef } from 'react';

Və ref ref-ni yaradaq. useRef hook-u nəticə olaraq bizə yeganə current xüsusiyyəti olan ref obyekti qaytarır, hansı ki, gələcəkdə bizim üçün maraqlı olacaq. Onun ilkin dəyərini 0 təyin edək:

const ref = useRef(0);

Düyməcik üçün klik emalçısı təyin edək. Xatırlayın ki, biz ref-in özünü deyil, onun current xüsusiyyətini oxumalı/dəyişməliyik:

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

Düyməmizə klik emalı üçün funksiya əlavə edək. Burada, əvvəlki state nümunəsində olduğu kimi, biz current-i 1 vahid artıracağıq. State-dən fərqli olaraq, hansında ki, onun dəyərini dəyişmək üçün setState funksiyası tələb olunur, biz ref-in xüsusiyyəti ilə birbaşa işləyirik:

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

İndi düyməmizə klik edək. Və nə görürük? Ona kliklədikdə, ilkin olaraq 0 necə idisə, elə də dəyişmir.

Əlbəttə, dəyərin ümumiyyətlə dəyişdiyinə şübhə edə bilərsiniz. Gəlin bunu yoxlayaq. Bunun üçün klik emalçısı funksiyasına current dəyərini konsola çıxaran başqa bir kod sətri əlavə edək:

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

İndi, brauzerdə konsolu açıb, yenidən düyməyə klikləyək və hər klikdə dəyərin həqiqətən də dəyişdiyinə və heç bir aldatma olmadığına əmin olaq.

İndi görürük ki, state-dən fərqli olaraq, ref-in dəyərinin dəyişməsi komponentin render olunmasını trigger etmir. Buna görə də biz hər dəfə düymənin mətnində ilkin dəyər 0 görürük.

Beləliklə, əgər sizin məlumatlarınız render üçün istifadə olunursa, onda onları state-də saxlayın, əgər sizə render lazım deyilsə, belə bir halda reflərdən istifadə daha səmərəli ola bilər.

Tutaq ki, sizin komponentinizdə mətni 'text' olan abzas və düymə var. Elə edin ki, hər dəfə düyməyə kliklədikdə abzasın mətninə nida işarəsi əlavə olunsun. Bunu state ilə edin.

App komponentini yaradın, amma indi state əvəzinə ref istifadə edin. Əmin olun ki, düyməyə basdıqda abzasın mətni dəyişməyəcək. Həmçinin abzasın mətnini konsola çıxarış əlavə edin, onu açın və mətnin əslində dəyişdiyinə əmin olun.