Əgər siz React qarmaqları haqqında hələ öyrənməmiş bir React tərtibatçısınızsa, indi vaxtdır. Bu yazı ətraflı şəkildə useEffect React Hook-dan keçəcək. Bu, İsveçrə ordusu bıçağının çəngəlinə bərabərdir. O, bir sıra məsələləri həll edir, məsələn, komponent quraşdırıldıqda məlumatı necə əldə etmək, vəziyyət və ya rekvizit dəyişdikdə kodu necə işə salmaq, taymerləri və ya intervalları necə qurmaq və s.
UseEffect, JSX (hər növ yan təsir) qaytarmayan React komponentində "etmək" istədiyiniz demək olar ki, hər şey üçün istifadə olunur. Hər bir komponent üçün bir neçə istifadə effektiniz də ola bilər.
Bütün bu gücün bir bahası var: onun necə işlədiyini başa düşməsəniz, çaşqınlıq yarada bilər. Bu yazıda biz müxtəlif nümunələrə baxacağıq ki, siz konseptual modeli başa düşə və onu öz kodunuza tətbiq edə biləsiniz.
Kancalara reaksiya verin - Nəyi həll etməyə çalışır?
Qarmaqlar ilk dəfə React 16.8 versiyasında təqdim edildi və indi bir çox React layihələrində istifadə olunur. Hooks komponentlər arasında kodun təkrarlanması problemini aradan qaldırır. Onlar dərslərdən istifadə etmədən yazılır. Bu o demək deyil ki, React dərsləri tərk edir; qarmaqlar sadəcə alternativ üsuldur.
Reaksiya sizə statistik məntiqlə mürəkkəb komponentləri tez yaratmağa imkan verir. Bu komponentləri ayırmaq çətindir, çünki sinif React Lifecycle Methods-a əsaslanır. React Hooks bura daxil olur.
Onlar bir komponenti daha kiçik funksiyalara bölməyə imkan verir. Lifecycle metodları əsasında kodu daha kiçik parçalara bölmək əvəzinə, indi funksionallıqdan asılı olaraq kodu daha kiçik vahidlərə təşkil edə və ayıra bilərsiniz.
UseEffect Hook nədir?
Qarmaqlar ES6 siniflərini yazmadan vəziyyətə və digər reaksiya imkanlarına daxil olmağa imkan verən funksiyalardır. React hooks API-də useEffect adlı qarmaq var. Əgər reaksiyanın həyat dövrləri ilə tanışsınızsa, useEffect çəngəl ilə eynidir. komponentDidMount, komponentDidUpdatevə komponentWillUnmount həyat dövrü üsulları birləşdirilir.
React Hooks sənədlərinə əsasən, o, ES6 sinif komponentinin həyat dövrü metodları ilə bağlı bəzi məsələləri həll etmək üçün yaradılmışdır.
sintaksis
Birinci arqument geri çağırış funksiyasıdır və hər bir renderdən sonra default olaraq yerinə yetirilir. İkinci parametr, Hook-a yalnız hədəf vəziyyəti dəyişdikdə geri çağırmağı əmr edən isteğe bağlı Asılılıq massividir.
Hook hər bir asılılığın tarixi və indiki vəziyyətini müqayisə edir. İki dəyər uyğun gəlmirsə, Hook birinci parametrdə göstərilən geri çağırışı çağırır. Asılılıq massivləri adi geri çağırış davranışını dəyişdirir və Hook-un komponent əhatə dairəsindəki bütün digər komponentlərə məhəl qoymamasına zəmanət verir.
Əsas istifadə
Mesajı saxlamaq üçün yuxarıdakı kod nümunəsində React useState-dən istifadə edirəm. Bundan sonra mesaj vəziyyəti dəyişənimi götürüb ekranda çap edirəm. Bununla belə, mən indi komponent quraşdırıldıqdan bir saniyə sonra mesajı dəyişdirmək üçün Effect-dən istifadə etmək istəyirəm.
React çərçivəsindən useEffect-i idxal etdikdən sonra effektimi useState xəttinin arxasına daxil etdim. UseEffect üçün ilk parametr funksiyadır. Bu funksiya idarəedicisi yerinə yetirildikdə, o, təmin etdiyiniz hər hansı yan təsirlərə diqqət yetirəcək. Funksiya React komponentinin həyat dövrü hadisələrindən biri baş verdikdə çağırılan geri çağırış funksiyasıdır.
Nə vaxt istifadə etməli?
UseEffect çəngəl müxtəlif vəziyyətlərdə faydalı ola bilər. Aşağıdakılar ən mühümdür:
- Təqdim olunan arqumentdən asılı olaraq məlumat əldə etmək istədikdə bu parametri müştəri tərəfdən dəyişə bilərik. Parametr təzə məlumatlarla yeniləndikdən sonra geri çağırılacaq.
- API son nöqtəsindən məlumatları əldə etmək və onu müştəri tərəfində göstərmək istəyiriksə. Komponentimiz təqdim edildikdə, useEffect çəngəlinə verilmiş funksiya və ya işləyici yerinə yetirilir və komponent vəziyyətlərindəki məlumatlar əldə edilir. Bu statuslar daha sonra istifadəçi interfeysi komponentlərində istifadə olunur.
- Komponentiniz xarici dünyadan verilənlərə güvəndikdə və məlumatların daxil olacağına əmin ola bilmədikdə, biz Effect-dən istifadə etməliyik (bəlkə də server oradadır). Problemləri atmaq və digər komponentlərin göstərilməsinin qarşısını almaq əvəzinə, onları useEffect çəngəlinə yerləşdirin.
Istifadə halları
Komponent ilk işə salındıqdan sonra yenidən göstərilərsə, o, icra olunmayacaq.
Komponent hər dəfə render edildikdə və ya yenidən render edildikdə, o, həmişə icra edilməlidir.
Varsayılan olaraq, proqram yalnız bir dəfə işləyir. Bundan sonra, dayaq dəyərləri dəyişirsə, işə salın:
Asinxron fəaliyyətlər üçün həmişə useEffect istifadə edin.
useEffect kod blokları inkişaf etdirici yoldaşlarınız üçün asinxron işlərin aşkar işarələridir. UseEffect istifadə etmədən asinxron kod yaratmaq mümkündür, lakin bu, “Reaksiya metodu” deyil və həm mürəkkəbliyi, həm də səhv riskini artırır.
UI-ni dayandıra biləcək asinxron kod yazmaq əvəzinə useEffect-dən istifadə React cəmiyyətində məşhur bir texnikadır, xüsusən də React komandasının onu yan təsir göstərmək üçün qurması üsulu.
Ondan istifadənin başqa bir üstünlüyü ondan ibarətdir ki, tərtibatçılar sadəcə kodu nəzərdən keçirə və “nəzarət axınından kənar” işlədilən kodu dərhal aşkarlaya bilərlər ki, bu da yalnız ilk render dövründən sonra vacib olur. Bundan əlavə, bloklar təkrar istifadə edilə bilən və daha çox semantik xüsusi Qarmaqlara çıxarmaq üçün uyğundur.
Məsələn:
UseEffect kodundan istifadə edərək saniyədə bir ədəd artırın.
Nəticə
Məncə, useEffect Hook-un əsas dizayn prinsiplərini və ən yaxşı təcrübələrini başa düşmək, növbəti səviyyəli React tərtibatçısı olmaq istəyirsinizsə, öyrənmək üçün vacib bir bacarıqdır.
Xülasə etmək üçün, useEffect Hook imperativ, potensial təsirli tam məntiqi ehtiva edən bir funksiya alır. İkinci parametr olan asılılıq massivi icraya təsir etmək üçün istifadə edilə bilər. Bununla məşğul olarkən, qaytarma funksiyasından istifadə edərək təmizləmə kodunu da yazmaq lazımdır.
Məqalənin faydalı olub olmadığını şərhlərdə bizə bildirin.
Cavab yaz