React.js frontend proqramlaşdırmada ən çox tələb olunan kitabxanalardan biridir və müsahibələrdə bu mövzu üzrə suallar geniş yer tutur. Bu bloqda React.js ilə bağlı frontend müsahibələrində tez-tez verilən sualları və cavablarını paylaşacağıq.
React biliklərini nümayiş etdirmək istəyən namizədlər üçün bu suallar real müsahibə təcrübələrinə əsaslanaraq hazırlanıb. Məqsəd həm təcrübəli, həm də yeni başlayan frontend developer-lərin müsahibəyə daha yaxşı hazırlaşmasına dəstək olmaqdır.
Əlaqəli yazılar:
React.js - useEffect nədir? useEffect necə işləyir?
useEffect React-in funksional komponentlərində yan təsirləri idarə etmək üçün istifadə edilən əsas hook-lardan biridir. Yan təsirlər dedikdə komponentin DOM-a yerləşdirilməsi, yenilənməsi və DOM-dan çıxarılması zamanı baş verən proseslər nəzərdə tutulur.
Bu hook class komponentlərində istifadə olunan componentDidMount, componentDidUpdate və componentWillUnmount metodlarını birləşdirir və onları daha sadə formada funksional komponentlərə tətbiq etməyə imkan verir.
useEffect(() => {
// side effect code
return () => {
// cleanup code (optional)
};
}, [dependencies]);
useEffect-in iş prinsipi
Renderdən sonra işə düşür
useEffect komponent render edildikdən sonra avtomatik olaraq işə düşür və daxilindəki kodu icra edir.
Yan təsirlər
Yan təsirlər komponentin əsas render prosesinə birbaşa aid olmayan, lakin istifadəçi təcrübəsini və veb saytın funksionallığını tamamlayan əməliyyatlardır. Məsələn, API çağırışları, brauzer başlığının dəyişdirilməsi və DOM elementlərinə müdaxilə bu kateqoriyaya daxildir.
Asılılıqlar — dependencies array
useEffect hook-u asılılıqlar, yəni dependencies array vasitəsilə nə vaxt işləyəcəyini təyin etməyə imkan verir.
Əgər asılılıq hissəsinə boş array yazsaq [], useEffect yalnız komponent ilk dəfə DOM-a yerləşdirildikdə, yəni mount zamanı bir dəfə işə düşəcək.
Əgər array içinə müəyyən bir dəyişən əlavə olunarsa, məsələn [count], bu zaman useEffect yalnız həmin dəyişən dəyişdikcə yenidən işə salınır.
Əgər asılılıqlar ümumiyyətlə göstərilməzsə, useEffect hər renderdən sonra işləyəcək. Bu isə performansa mənfi təsir göstərə və gözlənilməz davranışlara səbəb ola bilər.
useEffect(() => {
console.log("count dəyişdi:", count);
}, [count]);
Əgər useEffect içində jQuery ilə elementlərə çatmaq mümkündürsə, bəs niyə useRef istifadə edirik?
useRef React tərəfindən təqdim edilən daha təhlükəsiz və performanslı yanaşmadır. DOM elementinə birbaşa çatmaq üçün jQuery istifadə etmək texniki olaraq mümkün olsa da, bu üsul React-in Virtual DOM prinsiplərinə uyğun deyil və komponentlərin idarəsini çətinləşdirə bilər.
useRef istifadə etməklə React-in komponent həyatı dövrünə uyğun şəkildə DOM ilə əlaqə saxlamaq mümkündür. Bu da kodun daha sabit, oxunaqlı və təhlükəsiz olmasına kömək edir.
useEffect içində return olmalıdırmı? Hansı hallarda return yazılır?
Xeyr, useEffect içində return mütləq olmalı deyil. Əgər useEffect içində başladılan bir prosesin təhlükəsiz şəkildə dayandırılması və ya təmizlənməsi lazımdırsa, return ilə cleanup function yazmaq lazımdır.
Məsələn, event listener, interval, timeout, subscription və ya fetch sorğusunu dayandırmaq lazım olduqda return istifadə olunur. Əgər belə bir proses yoxdursa və sadəcə API çağırışı edilirsə, return yazmaq şərt deyil.
1. Event listener-ləri silmək üçün
useEffect(() => {
const handleScroll = () => console.log("Scrolling...");
window.addEventListener("scroll", handleScroll);return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);
2. Interval və timeout-ları təmizləmək üçün
useEffect(() => {
const intervalId = setInterval(() => {
console.log("Interval working");
}, 1000);return () => {
clearInterval(intervalId);
};
}, []);
3. WebSocket bağlantılarını bağlamaq və ya fetch sorğusunu dayandırmaq üçün
useEffect(() => {
const controller = new AbortController();
fetch("/api/data", { signal: controller.signal });return () => {
controller.abort(); // sorğunu ləğv et
};
}, []);
Redux nədir? Redux nə üçün istifadə olunur?
React kimi frontend kitabxanalarında komponentlər bir-birindən müstəqil işləyir və öz state-lərini saxlayır. Lakin böyük və mürəkkəb tətbiqlərdə müxtəlif komponentlər arasında məlumat paylaşmaq və idarə etmək çətinləşir.
Redux bu problemi həll etmək üçün yaradılmış mərkəzləşdirilmiş state management, yəni vəziyyət idarəetmə kitabxanasıdır.
Redux-un əsas məqsədləri
Mərkəzləşdirilmiş state idarəsi
Bütün veb saytın və ya tətbiqin vəziyyəti tək bir yerdə — store-da saxlanılır. Bu, məlumatların idarə olunmasını və izlənməsini asanlaşdırır.
Proqnozlaşdırıla bilən state dəyişiklikləri
State yalnız actions və reducers vasitəsilə dəyişir. Bu, veb saytın davranışını daha asan izləməyə və analiz etməyə imkan verir.
Komponentlər arasında məlumat paylaşımının asanlaşması
Komponentlər bir-biri ilə birbaşa əlaqə saxlamadan ortaq store üzərindən məlumatları alıb-verə bilir.
Debug və test imkanları
Redux DevTools kimi alətlər sayəsində state-in hər bir dəyişiklik addımı izlənilə, geriyə qaytarıla və tətbiq daha rahat test edilə bilər.
useMemo, memo və useCallback React-da nə üçün istifadə olunur və aralarındakı fərq nədir?
useMemo, memo və useCallback React-da performans optimizasiyası üçün istifadə olunan vasitələrdir.
useMemo ağır və ya mürəkkəb hesablama nəticəsini yaddaşda saxlayır və yalnız asılılıqlar dəyişəndə həmin hesablamanı yenidən edir. Bu da lazımsız hesablamaların qarşısını alır.
memo funksional komponentləri cache edərək, əgər props dəyişməyibsə, komponentin yenidən render olunmasının qarşısını alır və render sayını azaldır.
useCallback isə funksiyaların yaddaşda saxlanmasını təmin edir. Yəni eyni asılılıqlarla funksiyanı yenidən yaratmır. Bu, xüsusilə funksiyanı child komponentə props kimi ötürərkən faydalı olur.
Bu üç vasitə React ilə hazırlanan veb saytların daha səmərəli render və hesablama idarəsi üçün istifadə olunur.
React ilə hazırlanan veb saytların mənfi cəhətləri nələrdir?
React ilə hazırlanan veb saytların bəzi mənfi cəhətləri var.
React əsasən client-side rendering modelinə əsaslandığı üçün axtarış motorları bəzən tam və düzgün məzmunu indeksləməkdə çətinlik çəkə bilər. Bu isə SEO optimizasiyasını çətinləşdirə və saytın Google-da daha zəif görünməsinə səbəb ola bilər.
React ilə hazırlanan veb saytların ilkin yükləmə vaxtı bəzən yüksək ola bilər. Çünki JavaScript kodunun böyük hissəsi brauzer tərəfindən işlənməlidir. Bu da istifadəçi təcrübəsinə və saytın performansına mənfi təsir göstərə bilər.
Böyük və kompleks React tətbiqlərində state idarəsi, komponentlərin əlaqələndirilməsi və optimizasiya məsələləri çətinlik yarada bilər. Bu hallarda əlavə kitabxanalar və alətlərdən istifadə etmək lazım gəlir.
SEO və performans məsələlərini daha yaxşı həll etmək üçün bəzən server-side rendering və ya static site generation kimi əlavə texnologiyalardan istifadə olunur. Məsələn, Next.js bu məqsədlə React layihələrində çox istifadə edilir.
Bu səbəblərlə React ilə işləyərkən SEO, performans, render prosesi və state idarəsi kimi məqamlara xüsusi diqqət etmək vacibdir.
