Reaktivliyi dövlətlərlə reaksiyaya gətirin

Unsplash-dan @igorovsyannykov tərəfindən görüntü
Bu, React, onun əsas xüsusiyyətləri və ən yaxşı təcrübələrini təqdim etmək üçün "Yeni başlayanlar üçün reaksiya" seriyamın bir hissəsidir. Daha çox məqalə izləyəcək!

React komponentini necə göstərəcəyinizi bilirsinizsə, bu əladır. İndi komponentlərimizə öz məlumatlarını veririk.

İmtina: Bu məqalə daxili reaktiv vəziyyətə yönəlmişdir. Məqsədləri fərqli olduğundan komponent vəziyyəti və reduksiya uyğunsuz deyil.

Məncə, komponent statusu komponent sahəsinə xasdır (formanı doldurmaq üçün). Redux statusu da bir çox komponent üçün eyni statusu buraxmağa kömək edir.

Dövlətə ehtiyacım var?

Vəziyyətləri öyrənmək üçün bir sual komponenti yaradacağıq. Bəli / yox sualı göstərilir və cavab istənilir.

Sual komponentimiz yalnız üç funksiyanı ehtiva edir:

  • Başlanğıc üçün qurucu (rekvizit və status),
  • answerQuestion, istifadəçi cavab verdikdə işə yaranan geri çağırışdır
  • yəqin ki, artıq bildiyinizi göstərin - komponentin şablonunu çıxarır.

Bu komponent iki fərqli vəziyyətə malikdir. Suala cavab verilmir və ya sualın cavabı var.

Rekvizitlər yalnız sual etiketi üçün istifadə olunur və bundan əlavə dövlətin məqsədi daha maraqlıdır.

Dövlət, sualın cavabının olub olmadığını xatırlayan bir komponent mağazasıdır. Elədirsə, cavabı da bilir.

Vəziyyəti rekvizitlərə çevirin

Bir komponentdə vəziyyət istifadə etmək asandır. Məzmunu yeniləmək istəyirsinizsə, vəziyyəti işə salmalı və setState funksiyasını çağırmalısınız.

Bir komponent olduğunuzu düşünün. Statusunuz dəyişərsə, reaksiyanız reklamınızı yeniləməyinizə ehtiyacınız olmayacaqdır.

İşləmə qaydası budur. Render etmədən əvvəl shouldComponentUpdate ünvanına edilən zənglərə cavab verin (sənədlərə baxın). Bu ikinci funksiya növbəti virtual DOM statusunu yaradır (bu barədə son məqaləmdə danışmışam).

Komponentlər digər komponentlərdən rekvizit alırlar. Bu rekvizitlər dəyişərsə, komponent yenilənəcəkdir.

Əslində, necə işlədiyini onsuz da bilirsiniz - ancaq bir neçə sual ilə bir anket nümunəsi götürək.

Sorğu statusunda sual işarələrini ehtiva edir və mülk olaraq Suala ötürür.

Sorğu vəziyyətini yenilədikdə (setState çağırışları), göstərmə funksiyası işə salınır. Bu halda sualların verilməsi üçün bir tələb göndərilir (React doc-da ətraflı məlumat).

Konteyner nümunəsini götürün

Görünüşün və kodun qalan hissəsinin ayrılması həmişə inkişaf etdiricilər üçün əsas problem olmuşdur. Bu səbəbdən, çərçivələrdə istifadə olunan dizayn nümunələrinin əksəriyyəti MVC modelini qəbul edir.

Redux ilə Respond istifadə edirsinizsə, qab kontur modelini artıq bilirsiniz. Əslində, bu əlaqə funksiyası ilə inteqrasiya olunmuş redux funksiyadır.

Sual komponentini iki komponentə ayırmağın vaxtı gəldi.

Sual rekvizitlərin göstərilməsindən məsuldur. Bu tip komponent funksional, təqdimat və ya lal bir komponent kimi tanınır.

QuestionContainer vəziyyətin idarə olunması ilə məşğul olur.

MVC dizayn nümunəsi ilə müqayisə etmək üçün Sual bir görünüşdür və QuestionContainer bir nəzarətçidir.

Sual tələb edən digər komponentlər artıq Sual əvəzinə QuestionContainer istifadə edirlər. Bu fikir cəmiyyətdə yaxşı qəbul edilir.

SetState Anti-Pattern ilə diqqətli olun

Bu setState istifadə etmək olduqca sadədir.

Növbəti vəziyyəti ilk və yeganə parametr olaraq keçir. Mövcud vəziyyət xüsusiyyətləri yeni köçürülmüş dəyərlərlə yenilənir.

Xülasə olaraq bunları istifadə etmədiyinizi söyləmək olar.Status və these.Propsinside setState-ə zəng edir.

Bu dəyişənlərin gözlənilən dəyərləri olmaya bilər. Reakt vəziyyətdəki dəyişiklikləri optimallaşdırır. Performans problemlərinə görə (Virtual DOM-un optimallaşdırılmasına qədər), birdən çox dəyişiklik birinə birləşdirilir.

Digər setState formasını seçməlisiniz. Yalnız bir parametr olaraq bir funksiya daxil edin və dayaq və vəziyyət parametrlərindən istifadə edin (sənədlərə baxın).

Tam sorğu komponenti

Bu yazıda, React-da dövlətlərin əsas istifadəsini müzakirə etdik. Anket komponenti üçün tam kodu aşağıdakı kodependə tapa bilərsiniz.

Hər şey dövlətlər haqqında idi. Komponentlər, rekvizitlər və şərtlərlə qarşılaşdınız və indi React ilə oynamaq üçün başlanğıc dəstiniz var.

Ümid edirəm bu məqalədən zövq aldınız və çox şey öyrəndiniz!

Bu məqaləni faydalı hesab etdinizsə, başqalarının məqaləni tapması və dəstəyini göstərməsi üçün xahiş edirəm düyməsini bir neçə dəfə vurun!

Gələcək əşyalarım barədə məlumat almaq üçün məni izləməyi unutmayın

Bu, React, onun əsas xüsusiyyətləri və ən yaxşı təcrübələrini təqdim etmək üçün "Yeni başlayanlar üçün reaksiya" seriyamın bir hissəsidir.

Digər əşyalarımı yoxlayın

➥ JavaScript

  • Öz Veb İnkişaf Çerçevesinizi Yazaraq JavaScript Bacarıqlarınızı necə artırmaq olar
  • Vue.js. ilə işləyərkən qarşısını almaq üçün ümumi səhvlər.

İps Məsləhətlər və fəndlər

  • Ağrılı JavaScript ayıklamasından çıxın və Mənbə Xəritəsi ilə Intellij istifadə edin
  • Bu şəkildə nəhəng JavaScript paketlərini asanlıqla azalda bilərsiniz