Reaksiya ilə tanışlıq: Sinif komponenti və funksional komponent arasında fərq

Yeni reaksiya verirsiniz? 5 dəqiqə və ya daha az müddətdə yeni bir şey öyrənmək istəyirsiniz ?. Reaksiya komponenti haqqında məlumat verək.

Komponent nədir?

Hər şeydən əvvəl, bu mövzunu dərindən öyrənmədən əvvəl bir komponentin nə olduğunu mükəmməl bilməliyik.

Bir Komponent (Reaksiya içərisində), bütün layihədə təkrar istifadə edilə bilən (və başqaları da ola bilər) bir blok və ya tətbiqimizin bir hissəsi kimi təsvir ediləcəkdir, ümumiyyətlə bir UI elementi və davranışı ilə əlaqəlidir.

İndi əsasını bildiyinizi nəzərə alaraq, reaksiya layihəsində yarada biləcəyimiz iki növ komponenti, Sinif Komponentləri və Funksional Komponentləri nəzərdən keçirək.

Sinif komponenti

Buna da Əsas komponent deyilir. ECMAScript 2015-dən bəri javascript-də "sinif" var. React bu sintaksisdən həyat dövrü ilə dövlətli bir komponent yaratmaq üçün istifadə edir. Dövlət, ümumiyyətlə, komponentimizin və ya uşaqlarının davranışlarını dəyişdirmək üçün istifadə olunur.

Bu kodu sındıraq. Burada React.Component-dən funksionallıq əldə edən bir "JS sinfi" var, bundan sonra rekvizitləri dəlil olaraq qəbul edən konstruktoru elan edirik. Sonrakı məlumatları ana sinif komponentinə ötürmək üçün super deyirik, bu tip komponenti yaratdığımızda bu tələb olunur.

Bu "rekvizit" komponenti etiket kimi istifadə etdiyimiz bütün xüsusiyyətlərə sahib olan bir obyektdir.

Lampa komponentinin əsas təklifi var, bir mətn və düymə ilə HTML blokunu təqdim edir.

Lampanı yandırmaq və ya söndürmək üçün düyməni basaraq dövlətimizin oyuna girdiyi yerdədir, 4-cü sətirdə Lampanın vəziyyətini başladırıq və bundan sonra metodu işıqlandıracağını elan edirik, bu vəziyyəti açacaq lampamızın.

bu "vəziyyət", sinif icrası zamanı dəyişəcək bəzi xassələri olan bir obyektdir. Bu birbaşa dəyişdirilməməlidir, lakin setState metodu.

Vəziyyəti bu şəkildə dəyişdirə bilərsiniz:

Funksional komponent

İndi biz minimal, sadə və vətəndaşlığı olmayan bir komponent qurmaq istəyiriksə, bu istifadə olunan kodun miqdarını azaltmağa və DRY prinsipini daha asan tətbiq etməyə kömək edəcəkdir. Funksional komponent bəzi Jxs elementlərini qaytaran javascript funksiyasıdır.

Bir Lampochka Komponentinin bu nümunəsini yoxlayaq.

Budur, müntəzəm bir funksiyamız var, lampState adlı bir mülk ilə məhv edilmiş bir obyekt alır, yerli dəyişənə çevrilir və başqa bir img etiketini geri qaytarmaq üçün doğru və ya səhv olduğunu qiymətləndiririk.

İndi lampa komponentində necə birlikdə işləyə bildiklərini göstərmək üçün istifadə edə bilərik.

Bu, keçid düyməsini vurduğunda, yandırılmış ampulün görüntüsü dəyişəcəkdir.

Nə qarmaqlar?

Qarmaqlar, vəziyyətinizi funksional komponentdə istifadə etməyə imkan verən bir xüsusiyyətdir. Bunu daha çox təfərrüatla izah etmək lazımdır, çünki reaksiya verməyi daha dərindən qazmalıyıq və bunun da öz məqaləsinə layiq olduğunu düşünürəm.

Oxuduğunuz üçün təşəkkür edirəm, xoşunuz və ya xoşunuz deyilsə, mənə rəy bildirin -