React useRef Azərbaycanca İzahı
useRef, React tərəfindən təqdim edilən təhlükəsiz və performanslı bir yanaşmadır. DOM elementinə birbaşa çatmaq üçün jQuery istifadə etmək texniki olaraq mümkün olsa da, bu üsul React virtual DOM prinsipləri-nə ziddir və komponentlərin idarəsini çətinləşdirə bilər. useRef istifadə etməklə, React-in komponent həyatı dövrünə (lifecycle) uyğun şəkildə DOM ilə əlaqə saxlamaq mümkündür. Bu da kodun daha sabit, oxunaqlı və təhlükəsiz olmasına şərait yaradır.
useRef render üçün lazım olmayan bir dəyərə istinad etməyə imkan verən bir React Hook-dur.
const ref = useRef(initialValue)
useRef Reference - useRef(initialValue)
Ref təyin etmək üçün komponentinizin yuxarı səviyyəsində useRef-i çağırın.
import { useRef } from 'react';
function MyComponent() {
const intervalRef = useRef(0);
const inputRef = useRef(null);
// ...
useRef - Parametrlər
initialValue: ref obyektinin current xüsusiyyətinin ilkin dəyəri olaraq təyin etmək istədiyiniz dəyərdir. Bu, istənilən tipdə dəyər ola bilər. Bu arqument yalnız ilkin render zamanı nəzərə alınır.
Returns
useRef hook-u, React komponentində renderlər arasında sabit bir obyektin saxlanmasına imkan verir. Bu obyektin tək bir xüsusiyyəti var, o da current xüsusiyyətidir.
- İlkin dəyər: useRef(initialValue) ilə başladığınızda, current xüsusiyyəti initialValue ilə təyin olunur. Bu dəyər birbaşa istifadə oluna bilər.
const ref = useRef(0);
- Dəyişikliklər: Sonradan current xüsusiyyətini istədiyiniz dəyərlə əvəz edə bilərsiniz. Bu dəyişikliklər komponentin yenidən render edilməsinə səbəb olmaz, çünki useRef React-da renderlər arasında sabit qalır.
ref.current = 5;
- JSX ilə əlaqə: Əgər bu ref obyektini JSX elementinin ref atributu kimi ötürsəniz, React avtomatik olaraq həmin DOM elementinə istinad edəcək və onun current xüsusiyyətini təyin edəcək. Yəni, bu current xüsusiyyəti DOM elementinə işarə edir. (bu vəziyyətdə React avtomatik olaraq həmin input elementini ref.current-ə təyin edəcək.)
<input ref={ref} />
- Sabitlik: React-ın hər bir renderində, useRef hər zaman eyni obyekt-i geri qaytarır, sadəcə current xüsusiyyətini dəyişdirə bilərsiniz. Bu, React-ın render dövründə həmin obyektin qorunmasına kömək edir.
useRef xüsusən DOM elementləri ilə işləyərkən və ya render-lər arasında dəyişməyən bir məlumatı saxlamaq üçün çox yararlı olur, çünki komponent render olunanda həmin məlumat itmir və eyni obyekt hər zaman mövcud olur.
Qeydlər
ref.current dəyişkəndir — amma diqqətli olun!
ref.current istədiyiniz zaman dəyişə bilər. Bu baxımdan o, state-dən fərqlənir. Yəni:
ref.current = yeniDəyər;
deyə yazmaq tamamilə doğrudur və mümkündür.
Ancaq fərq: state dəyişəndə komponent avtomatik yenidən render olunur, ref.current dəyişəndə isə React bunu görmür və yenidən render etmir.
Nə vaxt ref.current-i dəyişməməlisiniz?
ref.current dəyişdirildikdə, React komponentinizi yenidən render etmir. React bunun dəyişdiyini bilmir, çünki ref sadə bir JavaScript obyektidir. Əgər siz ref.current-in dəyərini render nəticəsini formalaşdırmaq üçün istifadə edirsinizsə (məsələn, JSX-də ona əsasən nəyisə göstərirsinizsə), onu dəyişmək təhlükəlidir. Çünki bu dəyişiklik ekrana əks olunmayacaq.
const myRef = useRef("Salam");
return <div>{myRef.current}</div>; // JSX render bunu istifadə edir
// bir yerdə:
myRef.current = "Yeni mesaj"; // bu dəyişiklik renderdə əks olunmayacaq
Bu halda, state istifadə olunmalı idi.
Yalnız ilkin qurulum və ya imperativ məqsədlərlə istifadə edin
Render zamanı ref.current-ə yalnız ilkin qurulum məqsədilə müraciət edin və ya onu dəyişin. Əks halda komponentinizin davranışı gözlənilməz ola bilər.
Render zamanı ref.current-ə yalnız:
- İlkin dəyəri oxumaq
- DOM elementinə istinad saxlamaq
- və ya imperativ funksiyalar çağırmaq üçün müraciət edin.
Əgər siz onu renderin gedişində dəyişirsinizsə, bu komponentin davranışını qarışdıra bilər.
React Strict Mode (Yalnız inkişaf zamanı)
Strict Mode rejimində, React komponent funksiyanızı təsadüfi qeyri-saflıqları tapmaq üçün iki dəfə çağıracaq. Bu yalnız inkişaf(development) mühitində baş verir və istehsal(production - veb sayt yaradıb deploy etdiyiniz zaman) üçün keçərli deyil. Hər ref obyekti iki dəfə yaradılacaq, lakin versiyalardan biri atılacaq. Əgər komponent funksiyanız safdırsa (pure) (belə olmalıdır), bu, davranışa təsir etməyəcək.
React-da useRef İstifadəsi
Ref ilə bir dəyərə istinad etmək
Komponentinizin yuxarı səviyyəsində bir və ya bir neçə ref təyin etmək üçün useRef-i çağırın.
import { useRef } from 'react';
function Stopwatch() {
const intervalRef = useRef(0);
// ...
useRef, daxil etdiyiniz ilkin dəyərlə (initialValue) təyin olunmuş tək current xüsusiyyətinə sahib bir ref obyekti qaytarır.
Növbəti renderlərdə useRef eyni obyekti qaytaracaq. Siz onun current xüsusiyyətini dəyişərək məlumat saxlaya və sonradan oxuya bilərsiniz. Bu, sizə state-i xatırlada bilər, amma burada mühüm bir fərq var:
Ref-də dəyişiklik komponentin yenidən render olunmasına səbəb olmur. Bu o deməkdir ki, vizual görünüşə təsir etməyən məlumatları saxlamaq üçün ref mükəmməldir. Məsələn, əgər setInterval funksiyası ilə yaradılmış ID-ni saxlamaq və sonra istifadə etmək lazımdırsa, bu məlumatı ref-də saxlaya bilərsiniz. Ref-in daxilindəki dəyəri yeniləmək üçün current xüsusiyyətini əl ilə dəyişməlisiniz:
function handleStartClick() {
const intervalId = setInterval(() => {
// ...
}, 1000);
intervalRef.current = intervalId;
}
Sonradan, bu interval ID-ni ref-dən oxuyaraq onu silə bilərsiniz:
function handleStopClick() {
const intervalId = intervalRef.current;
clearInterval(intervalId);
}
Ref istifadə etməklə aşağıdakılara nail olursunuz:
- Renderlər arasında məlumat saxlaya bilərsiniz (adi dəyişənlərdən fərqli olaraq, onlar hər renderdə sıfırlanır).
- Dəyişiklik re-render yaratmır (state dəyişkənlərindən fərqli olaraq, onlar dəyişdikdə komponenti yenidən render edir).
- Məlumat hər komponent nüsxəsinə özəldir (xaricdəki dəyişənlərdən fərqli olaraq, onlar paylaşılır).
Ref-də dəyişiklik re-render yaratmadığı üçün, əgər hansısa məlumatı ekranda göstərmək istəyirsinizsə, ref uyğun deyil. Bu halda state istifadə edilməlidir. useRef və useState Hook arasında seçim etmək üçün əvvəlki bloqda state haqqında oxumağınız məsləhət görülür.
useRef ilə bir dəyərə istinad etməyə dair nümunə
Bu komponent düymənin neçə dəfə klikləndiyini izləmək üçün ref istifadə edir. Qeyd edək ki, burada state əvəzinə ref istifadə etmək uyğundur, çünki klik sayı yalnız event handler-də oxunur və yazılır.
import { useRef } from 'react';
export default function Counter() {
let ref = useRef(0);function handleClick() {
ref.current = ref.current + 1;
alert('You clicked ' + ref.current + ' times!');
}return (
<button onClick={handleClick}>
Click me!
</button>
);
}
Əgər JSX daxilində {ref.current} göstərsəniz, klik zamanı rəqəm yenilənməyəcək. Bunun səbəbi ref.current-in dəyişməsinin komponentin yenidən render olunmasına səbəb olmamasıdır. Render üçün istifadə olunan məlumat state daxilində saxlanılmalıdır.
Ref ilə DOM-u idarə etmək
React DOM-u avtomatik olaraq render nəticənizə uyğun yeniləyir, buna görə də komponentlərinizin çox vaxt DOM-u birbaşa idarə etməsinə ehtiyac olmur. Lakin bəzən React tərəfindən idarə olunan DOM elementlərinə daxil olmaq lazım ola bilər — məsələn, bir veb sayt hazırladığınızda node-a fokuslamaq, ona doğru skrol etmək və ya onun ölçüsünü və mövqeyini ölçmək üçün. React-də bunları birbaşa etmək üçün daxili bir üsul yoxdur, buna görə DOM node-u üçün ref istifadə etməlisiniz.
Nümunə: input sahəsini fokuslamaq
import { useRef } from 'react';
export default function Form() {
const inputRef = useRef(null);function handleClick() {
inputRef.current.focus();
}return (
<>
<input ref={inputRef} />
<button onClick={handleClick}>Focus the input</button>
</>
);
}
Bunu həyata keçirmək üçün:
- inputRef-i useRef Hook ilə təyin edin.
- inputRef-i <input ref={inputRef}> kimi ötürün. Bu React-ə bildirir ki, həmin <input> elementinin DOM node-u inputRef.current-ə təyin olunsun.
- handleClick funksiyasında, inputRef.current-dən input DOM node-unı oxuyun və inputRef.current.focus() ilə focus() metodunu çağırın.
- handleClick event handler-inə <button>-un onClick atributu vasitəsilə ötürün.
DOM idarəetməsi üçün refs ilə ən yaxşı təcrübələr (best practices)
Refs — React-dən “xaricə çıxmaq” lazım olduqda istifadə edilən bir çıxış yoludur. Onları yalnız React-in idarə etmədiyi hallarda istifadə etməlisiniz. Məsələn, fokuslamaq, skrol vəziyyətini idarə etmək və ya React-in təqdim etmədiyi brauzer API-lərini çağırmaq kimi hallarda refs-dən istifadə olunur.
Fokuslama və skrol kimi dağıdıcı olmayan əməliyyatlarda refs istifadə etsəniz, problem yaşanmaz. Lakin, DOM-u əl ilə dəyişməyə çalışdığınız zaman, React-in etdiyi dəyişikliklərlə ziddiyyətə düşmə riskiniz var.
Aşağıdakı nümunədə bu problemi göstərmək üçün bir xoş gəlmisiniz mesajı və iki düymə var. Birinci düymə React-də adətən etdiyiniz kimi state və şərti renderlə dəyişiklik edir. İkinci düymə isə remove() DOM API-sindən istifadə edərək elementi React-in nəzarətindən kənar zorla DOM-dan silir.
- "Toggle with setState" düyməsini bir neçə dəfə basın. Mesaj yoxa çıxmalı və yenidən görünməlidir.
- Sonra "Remove from the DOM" düyməsini basın. Bu elementin DOM-dan zorla silinməsinə səbəb olacaq.
- Nəhayət, "Toggle with setState" düyməsini yenidən basın:
import { useState, useRef } from 'react';
export default function Counter() {
const [show, setShow] = useState(true);
const ref = useRef(null);return (
<div>
<button
onClick={() => {
setShow(!show);
}}>
Toggle with setState
</button>
<button
onClick={() => {
ref.current.remove();
}}>
Remove from the DOM
</button>
{show && <p ref={ref}>Hello world</p>}
</div>
);
}
Əl ilə DOM elementini sildikdən sonra, setState ilə onu yenidən göstərməyə çalışdığınız zaman proqram qəzaya uğrayacaq. Bunun səbəbi, DOM-u dəyişdirməniz və React-in onu düzgün idarə etməyə davam edə bilməməsidir.
React tərəfindən idarə olunan DOM node-larını dəyişdirməkdən çəkinin. React-in idarə etdiyi elementlərin alt elementlərini dəyişdirmək, əlavə etmək və ya silmək vizual nəticələrin uyğunsuzluğuna və ya yuxarıdakı kimi qəzaya səbəb ola bilər.
Lakin bu, tamamilə qadağan demək deyil. Diqqətlə yanaşmaqla bəzi hallarda təhlükəsizdir. React-in heç vaxt yeniləməyəcəyi DOM hissələrini təhlükəsiz şəkildə dəyişə bilərsiniz. Məsələn, JSX-də bəzi <div> elementləri həmişə boş qalırsa, React onların uşaqlar siyahısını dəyişdirmək üçün səbəb tapmaz. Ona görə orada elementləri əl ilə əlavə etmək və ya silmək təhlükəsizdir.
Nəticə
useRef React-da renderlər arasında məlumatı qorumaq və DOM elementlərinə təhlükəsiz şəkildə istinad etmək üçün mükəmməl vasitədir. Bu hook renderlərin təkrarlanmasına səbəb olmadan məlumatı yadda saxlayır və React-in virtual DOM konseptinə uyğun işləyir. Ref-lərin düzgün və ehtiyatlı istifadəsi React komponentlərinin daha səmərəli və stabilliyini təmin edir.
Frontend Müsahibə Sualları
React-də useState və useRef arasındakı fərq nədir?
useState komponentin state-in idarəsi üçün istifadə olunur və state dəyişdikdə komponent yenidən render olunur. useRef isə DOM elementlərinə və ya dəyişməyən dəyərlərə birbaşa istinad üçün istifadə edilir, onun dəyəri dəyişdikdə komponent yenidən render olunmur.
Virtual DOM nədir və onun üstünlükləri hansılardır?
Virtual DOM — real DOM-un yüngülləşdirilmiş surətidir. React dəyişiklikləri əvvəlcə Virtual DOM-da hesablayır, sonra ən optimal şəkildə real DOM-a tətbiq edir. Bu, performansı artırır və lazımsız renderlərin qarşısını alır.
CSS-də Flexbox nədir və hansı hallarda istifadə olunur?
Flexbox, elementləri konteyner daxilində xətti şəkildə yerləşdirmək və onları asanlıqla düzənləmək üçün CSS moduludur. O, responsive dizaynlarda elementlərin yatay və şaquli düzülüşünü idarə etmək üçün ideal seçimdir.
