React Hooks ilə işə başlamaq: İdarə olunan formalar

React qarmaqları, 90% daha təmiz Reaksiyalar yazmağa imkan verən parlaq yeni bir təklifdir. Dan Abramovun fikrincə, çəngəllər React-in gələcəyidir.

Yaxşı səslənir, amma qarmaqlar nədir və daha yaxşı kod yazmağıma necə kömək edə bilərlər? Xahiş etdiyinizə görə sevindim.

Funksional bir komponentdəki vəziyyətə və həyat dövrü metodlarına daxil olmaq üçün qarmaqlardan istifadə edə bilərsiniz. Əvvəlki cümlə sizə qəribə gəlirsə, burada React yaddaşınızı təzələməlisiniz.

React komandası, Stateful Components baqajı olmadan təmiz kod yazmağınıza kömək edəcəyini söyləyir. Bir çılpaq formu qarmaqlarla tətbiq etdikdən sonra onlarla razıyam.

Əvvəlcə sadə bir formanı əyarlı bir komponentdə kodlayaq. Eyni formanı qarmaqlarla yenidən yazacağıq və hansını daha yaxşı bəyəndiyinizə qərar verə bilərsiniz.

Konfiqurasiya

Codesandbox.io saytına gedin, bir hesab yaradın, daxil olun və yeni bir sandbox yaradın. Sandbox yaratarkən Cavab seçin.

Şablonlar siyahısından Cavab seçin

Sandbox açıq olduğundan, React-un qarmaqları dəstəkləyən bir versiyasını istifadə etdiyimizə əmin olmalıyıq. Bunun səbəbi bu anda qarmaqların yalnız alfa versiyalarında mövcud olmasıdır.

ƏLAVƏ OLUNUB: Çəngəllər indi React v16.8-in ictimai sabit versiyasındadır.

Sandboxın sol tərəfindəki fayl redaktoruna baxın və:

  • "Asılılıqlar" düyməsini vurun.
  • Həm cavab verin, həm də cavab verin.
  • İndi "Asılılıq əlavə et" düyməsini vurun.
  • Giriş sahəsinə "React" daxil edin və ilk nəticənin sağındakı açılan siyahıya vurun.
  • 16.8.0-alpha.1 versiyasını seçin.
  • İndi quraşdırmaq üçün təsviri vurun.
Ən son alfa versiyasını seçdiyinizə əmin olun

Eyni addımları "React-Dom" üçün təkrarlayın.

KOD

İndi quraşdırma ilə yoldan çıxdığımız üçün kod yazmağın vaxtı gəldi. Yaratdığınız sandboxa gedin, Form.jsx adlı yeni bir fayl yaradın və aşağıdakı kodu yapışdırın:

idxal React, {Component} "reaksiya" dən;
Sinif forması genişləndirilmiş Komponent {konstruktor (rekvizit) {super (rekvizit);
this.state = {ad: "", soyad: "", e-poçt: "", parol: "",};
this.handleInputChange = this.handleInputChange.bind (bu); }
handleInputChange (hadisə) {this.setState ({[event.target.name]: event.target.value}); }
render () {const {ad, soyad, e-poçt, parol} = this.state;
Qayıt (
  
İxrac standart forması;

İndi index.js açın və məzmunu aşağıdakı kodla əvəz edin:

"reaksiya" verərək reaksiya verən idxal; ReactDOM-u "react-dom" -dan idxal edin;
Formanı "./Form.jsx" -dən idxal edin; idxal "./styles.css";
İşlev Tətbiqi () {return ( React-də sadə bir forma ); }
const rootElement = document.getElementById ("kök");
ReactDOM.render ( , rootElement);

Hər şeyin yaxşı işlədiyini görmək üçün formanı sınayın. React-də nəzarət olunan bir forma tətbiq etmək üçün "köhnə məktəb" idi.

Vəziyyəti qurmamız lazım olan qazan plitələrinin sayını və hər giriş dəyişikliyi ilə yeniləmə üsulunu qeyd edin.

Eyni formanı React Hooks ilə kodlayaq (nəhayət!). Lakin əvvəlcə Form.jsx-dən bütün kodları silin və yenidən başlayaq.

Əvvəlcə sənədin üstünə aşağıdakı sətri əlavə edin.

idxal React, {useState} 'reaksiya' dən;

Beləliklə buraya idxal edilmiş useState adlı bilinməyən bir metod var. Bu nədir və necə istifadə edirik?

UseState, komponentimizdəki vəziyyətə daxil olmaq və düzəltmək üçün istifadə edə biləcəyimiz React Hookdur. Bu o deməkdir ki, əvvəlki kodumuzda olduğu kimi Komponenti genişləndirmək məcburiyyətində deyilik.

Bu, React API-də daha təmiz kod yazmağımıza kömək edəcək bir neçə yeni çəngəldən biridir. Gəl indi istifadə edək.

idxal React, {useState} "reaksiya" dən; idxal "./styles.css";
İşlev Forması () {const [firstName, setFirstName] = useState (""); const [lastName, setLastName] = useState (""); const [email, setEmail] = useState (""); const [password, setPassword] = useState ("");
Qayıt ( setFirstName (e.target.value)} placeholder = "Ad" type = "text" name = "firstName" required /> setLastName (e.target.value)} placeholder = "Soyad" type = "text" name = "soyad" tələb olunur /> setEmail (e.target.value)} placeholder = "e-poçt ünvanı" type = "email" name = "email" required /> setPassword (e.target.value)} placeholder = "Parol" type = "password" name = "password" required />
  
İxrac standart forması;

Funksional komponentimizi yaratdıq, amma izah edəcəyim bilinməyən bir kod var. Xüsusilə, komponentimizdəki yuxarıdakı dörd açıqlama.

Kodun bu hissəsi əvvəlcə qəribə görünsə də, anlamaq asandır. Artıq komponentimizin vəziyyətini ehtiva edən bir dövlət deyilən bir obyekt elan etmirik. Bunun əvəzinə, indi statusu bir neçə bəyana ayırırıq.

Tutaq ki, tanıdığımız şəkildə React.Component kimi firstName adlı bir vəziyyət dəyişənini elan etmək istədik. Ümumiyyətlə bunu konstruktorda edirik və sonra this.state.firstName yazaraq onlara daxil oluruq.

Bununla birlikdə, useState ilə firstName və setFirstName adları ilə iki dəyişəni başlatırıq. Daha sonra dəyərlərini useState () qaytaran dəyərə təyin etdik.

Niyə setFirstName elan etməliyik?

Bu funksional bir komponent olduğundan, vəziyyət dəyişəninin dəyərini dəyişdirməyimizə kömək edəcək bir setState yoxdur. Bizdə olan setFirstName, yeganə məqsədi ilk adın adını hər dəfə çağırdığımızda yeniləməkdir.

Gördüyünüz zaman:

const [firstName, setFirstName] = useState ("")

Əsasən bir status dəyişənini və daha sonra status dəyişəni dəyişə biləcəyimiz bir funksiyanı elan edirik. UseState çağırışındakı boş sətir ilk adın başlanğıc dəyəridir və istənilən istənilən dəyərə təyin edilə bilər. Hələlik onu boş bir sətrə təyin edəcəyik.

SetFirstName funksiyasına istədiyiniz hər hansı bir ad verə biləcəyinizi unutmayın. Bununla birlikdə, dəyişdiriləcək status dəyişəninin adının qarşısına "set" əlavə etmək konvensiyadır.

Artıq funksional komponentdə vəziyyət dəyişəninin necə yaradılacağını və yenilənəcəyini bilirik. Kodun qalan hissəsini izah edək.

İlk giriş etiketimizdə, yuxarıdakı komponentdə elan etdiyimiz status dəyişəninə dəyər təyin etdik. OnChange işləyicisi, status dəyişənimizi bizim üçün yeniləyən funksiyanı çağıran bir ox funksiyasına qurulmuşdur.

Əvvəlki sinif komponentimizdə handleInputChange adlı bir metodumuz varsa, indi statusumuzu bizim üçün yeniləyən anonim bir funksiyamız var.

Formanıza mətn daxil etməyə çalışaraq hər şeyin düzgün işlədiyini yoxlayın. Hər şey işləyirsə, təbrik edirəm, sadəcə reaksiya çəngəlindən istifadə etdiniz. Əks təqdirdə, bu təlimatı yenidən oxuyun və heç bir təlimatı atlamadığınızdan əmin olun.

İstədiyiniz şəkildə üslubu əlavə edin və zövq alın.

REFLEKSİYALAR

ƏLAVƏ OLUNUB: Bəzilərimiz onClick işləyicisindəki xətt funksiyalarının istifadəsindən narahat ola bilərik. Dan Abramov-a bu barədə tweet yazdım və o, çəngəllərlə satır içi funksiyaları istifadə etməyin pis bir şey olmadığını izah edən Hooks sənədlərinin bu hissəsi ilə cavab verdi.

Yeni kodumuzu keçib köhnəsi ilə müqayisə etdikdə React Hooks-un bizə daha yaxşı kod yazmağa necə kömək edə biləcəyi göz qabağındadır.

Sinif komponenti ilə funksional komponenti yan-yana müqayisə etdikdə aydın olur ki, funksional komponent daha asan başa düşülür, daha az kod istifadə olunur və ümumiyyətlə daha təmiz görünür.

React Hooks-u sevirsinizsə, rəsmi sənədləri oxuyaraq və bəzi layihələrinizi onlarla yenidən həyata keçirməyə çalışaraq daha çox məlumat əldə edə bilərsiniz.

Yenə də fikirlərinizi eşitmək istərdim. Kancaların React-in gələcəyi olduğunu düşünürsən, yoxsa bunların yalnız lazımsız hiyləgərlik olduğunu düşünürsən? Aşağıda bir şərh buraxın.

Bu yazı ilk olaraq The Andela Way-də çıxdı.