“React : Higher order components” istifadəsi
--
Bu məqalədə React`ın qarışıq sayılabiləcək mövzularından olan “Higher order components” haqqında danışacağıq.
Programlaşdırma edərkən , kodlarımız nə qədər sadə və qısa olarsa , o kod keyfiyyətli kod sayılır. Çunki kodlar az olduğu zaman həm oxuyarkən daha rahat başa düşmək olur , həm çəkisi az olur performansa yaxşı mənada təsir edir həmdə ki kompleks formada olur deyə dəyişiklik etmək daha rahat olur.
React ilə proqramlaşdırma edərkən , bəzən elə vaxtlar olur ki , ortaq xüsusiyyətləri olan komponent`lər yaratmalı oluruq. HOC istifadə etmədən bunu daha uzun kodlarla həll etmək olar. Amma yuxarı da qeyd etdiyimiz kimi , kod nə qədər az olarsa , o qədər keyfiyyətli sayılır :)
Bəs nədir HOC ?
Higher order components , rəsmi dokumentasiyada da qeyd olunduğu kimi , React`ın Advanced bölməsinə aid mövzudur. İşləmə məntiqi belədir ki, komponent birbaşa render edilmir. Render olunmadan öncə , bir “Örtücü” funksiyanın daxilindən render edilir. Misalçün , təsəvvür edək ki 3 fərqli komponentimiz var və biri-birindən fərqli olmalarına baxmayaraq , ortaq tərəfləri də var. Bu HTML Layout strukturu , CSS dizaynı və s. ola bilər. 2–3 komponent üçün hər kodu başdan yazmaq çox da ciddi problem yaratmayacaq. Bəs komponent sayı 10–20–30 olarsa ? Təsəvvür edirsiz mi dəyişiklik etmək nə qədər çətinləşir ? Eyni zamanda proyektin ölçüsü artır və performansa pis təsir edir bu. HOC ilə bu halların qarşısını alacağıq.
Kodlayaq
Bu hissədə diqqət etməli olduğunuz 5 fayl olacaq :
- App.js — Əsas komponent, Komponentlərin çağrılacağı fayl
- hoc.js — HOC funksiyamızı yazacağımız fayl
- FirstComponent.js — birinci komponent
- SecondComponent — ikinci komponent
- style.css — CSS dizayn faylımız
App.js :
Burada yaratdığımız 2 komponent FirstComponent və SecondComponent çağrılıb və render olunub. Props olaraq isə text verilib.
hoc.js :
Burada diqqətli olmaq lazımdır. Kodları başa düşməyə çalışaq. Deməli ilk öncə Hoc adlı funksiya yaratmışıq. Və bu funksiya argument olara bir komponent alır. Daha sonra isə , daxilində InnerComponent adlı “Örtücü” funksiya yazmışıq. Fikir verirsizsə, bu funksiya tam bir komponent quruluşundadır və arqument olaraq da props dəyəri alır. Ən mərkəzdə isə <Component /> sətri ilə , argunment olaraq aldığımız komponenti dinamik olaraq render edirik. Props olaraq isə , örtücü funksiyadan gələn argunmentini props olaraq alırıq.
FirstComponent.js :
Burada çağıracağımız komponentə hoc funksiyasını import edirik və export edərkən , Hoc funksiyasının daxilində export edirik.
SecondComponent.js :
Burada da, komponenti yaradıb, Hoc funksiyasının daxilində export etdik.
Style.css :
Burada müəyyən dizaynlar verilib.
Render olunan səhifə
Yuxarı yazdığımız kodların nəticəsi olaraq , şəkildəki kimi bir səhifə görürük. Burada, yuxarıda üstdəki blok FirstComponent altdaki isə SecondComponent komponentləridir. Kodları inspect edək :
Bura da diqqət etsək 2 ədəd eyni strukturlu Div`in render edildiyini görürük. Dediyimiz divlərin daxilinə baxaq :
Gördüyümüz kimi. hər iki komponentin strukturu eynidir. HOC ilə bunu etməsək , hər komponent uçun ayrıca etməli olacağdıq. Bu isə dediyimiz kimi həm kodları artıracaqdı , həm performansı azaldacaqdı həmdə ki dəyişiklik edərkən hər bir komponent üçün ayrıca dəyişiklik etməli olacağdıq və bu da ciddi vaxt itkisinə səbəb olacaqdı.
Vaxt ayırıb oxuduğunuz uçun təşəkkür edirəm. Sualınız varsa şərhlərdə və ya sosial mediadan yaza bilərsiz. Yeni məqalələrdən xəbərdar olmaq üçün isə , izləməyi unutmayın.
Təşəkkürlər ❤️