Bu React.js-da bilishingiz kerak bo'lgan tushunchalar (asoslarni o'rganganingizdan so'ng)

Unsplashda Daniel Jensen surati

Siz birinchi React.js qo'llanmangizga amal qildingiz va o'zingizni juda yaxshi his qildingiz. Endi nima? Keyingi maqolada men sizning reaktsiya qobiliyatingiz va bilimingizni keyingi bosqichga olib chiqadigan 5 ta tushunchani muhokama qilaman.

Agar siz reaktsiya qilish uchun mutlaqo yangi bo'lsangiz, ushbu qo'llanmani to'ldirishga biroz vaqt ajrating va keyin qaytib keling!

1. Komponentlarning hayot aylanishi

Ushbu ro'yxatdagi eng muhim tushuncha komponentlarning hayot aylanishini tushunishdir. Komponentning hayot aylanishi aynan shunday ko'rinishga ega: u tarkibiy qismning ishlash muddatini batafsil bayon qiladi. Biz kabi tarkibiy qismlar tug'ilib, er yuzida bo'lgan vaqt davomida ba'zi ishlarni amalga oshiradilar va keyin o'lishadi

Ammo bizdan farqli o'laroq, tarkibiy qismning hayot bosqichlari biroz farq qiladi. Bu quyidagicha ko'rinadi:

Rasm shu yerdan!

Keling, ushbu rasmni buzaylik. Har bir rangli gorizontal to'rtburchaklar hayot tsiklini bildiradi ("React updates DOM va refs" -dan tashqari). Ustunlar tarkibiy qismlarning hayotidagi turli bosqichlarni anglatadi.

Bir vaqtning o'zida komponent faqat bitta bosqichda bo'lishi mumkin. U o'rnatishdan boshlanadi va yangilanishga o'tadi. U virtual DOM-dan chiqarilgunga qadar doimiy ravishda yangilanadi. Keyin u ajratish bosqichiga o'tadi va DOM-dan chiqariladi.

Hayotiy tsikl usullari bizga kodni tarkibiy qismning muayyan qismida yoki tarkibiy qism hayotidagi o'zgarishlarga javoban ishlatish imkonini beradi.

Keling, komponentning har bir bosqichini va tegishli usullarni ko'rib chiqaylik.

O'rnatish

Sinfga asoslangan tarkibiy qismlar sinflar bo'lganligi sababli, nom, birinchi ishlaydigan usul konstruktor usuli hisoblanadi. Odatda, konstruktor siz komponent holatini boshlaydigan joy.

Keyingi, komponent getDerivedStateFromProps-ni ishlaydi. Men bu usulni o'tkazib yubormoqchiman, chunki u cheklangan.

Endi biz sizning JSX-ni qaytaradigan ko'rsatish usuliga o'tdik. Endi DOM-ga "moslashuvlar" bilan javob qaytaring.

Nihoyat, komponentDidMount usuli ishlaydi. Bu erda siz ma'lumotlar bazalariga har qanday asenkron qo'ng'iroqlarni amalga oshirishingiz yoki kerak bo'lsa DOM-ni to'g'ridan-to'g'ri boshqarishingiz mumkin. Xuddi shunday, bizning tarkibiy qismimiz tug'iladi.

Yangilanmoqda

Ushbu bosqich har safar holati yoki rekvizitlar o'zgarganda tetiklanadi. O'rnatish kabi, getDerivedStateFromProps deb nomlanadi (lekin bu safar hech qanday konstruktor yo'q!).

Keyingi mustComponentUpdate ishlaydi. Bu erda siz eski rekvizitlar / holatni yangi to'plam / holat bilan taqqoslashingiz mumkin. Sizning tarkibiy qismingiz haqiqiy yoki noto'g'ri ni qaytarib ko'rsatish kerakmi yoki yo'qligini aniqlashingiz mumkin. Bu sizning qo'shimcha ilovalaringizni qisqartirish orqali veb-ilovangizni yanada samaraliroq qilishi mumkin. AgarComponentUpdate noto'g'ri bo'lsa, yangilanish davri tugaydi.

Agar yo'q bo'lsa, React qayta taqdim eting va getSnapshotBeforeUpdate keyin ishlaydi. Ushbu usul ham cheklangan foydalanishga ega. React keyin komponentDidUpdate ishlaydi. KomponentDidMount singari, siz uni har qanday async qo'ng'iroqlarini amalga oshirish yoki DOM-ni boshqarish uchun ishlatishingiz mumkin.

Yechilmoqda

Bizning tarkibiy qismimiz yaxshi hayot kechirdi, lekin hamma yaxshi narsalar tugashi kerak. O'chirish bosqichi bu tarkibiy qismlarning hayot tsiklining oxirgi bosqichidir. DOM-dan biron bir komponentni olib tashlaganingizda, React komponentni o'chirishdan oldin u ishlaydi. Ushbu usulni WebSockets yoki intervallar kabi ochiq ulanishlarni tozalash uchun ishlatishingiz kerak.

Hayot aylanishining boshqa usullari

Keyingi mavzuga o'tishdan oldin, qisqacha powerUpdate va getDerivedStateFromError haqida gaplashaylik.

powerUpdate - bu to'g'ridan-to'g'ri qayta namoyish qilishni keltirib chiqaradigan usul. Buning bir nechta foydalanish holatlari bo'lishi mumkin bo'lsa-da, odatda buni oldini olish kerak.

Boshqa tomondan getDerivedStateFromError - bu hayotiy tsikl usuli bo'lib, u tarkibiy qismlarning hayot aylanishining bevosita qismi emas. Agar tarkibiy qismda xato bo'lsa, getDerivedStateFromError ishga tushadi va siz xato yuz berganligini aks ettirish uchun holatni yangilashingiz mumkin. Ushbu usuldan ko'p foydalaning.

Quyidagi CodePen parchasi montaj bosqichidagi qadamlarni ko'rsatadi:

Hayotiy tsikl usullarini tartibda o'rnatish

React tarkibiy qismlarining hayot aylanishini va usullarini tushunish sizga to'g'ri ma'lumot oqishini ta'minlash va ilovangizdagi voqealarni boshqarish imkonini beradi.

2. Yuqori buyurtma komponentlari

Siz allaqachon yuqori buyurtma qilingan komponentlardan yoki HOC-dan foydalangan bo'lishingiz mumkin. React-Redux-ning ulanish funktsiyasi, masalan, HOC ni qaytaradigan funktsiya. XOK nima o'zi?

Reakt hujjatlaridan:

Yuqori darajadagi komponent - bu tarkibiy qismni olib, yangi komponentni qaytaradigan funktsiya.

React-Redux-ning ulanish funktsiyasiga qaytsak, quyidagi kod parchalarini ko'rib chiqamiz:

const hoc = ulanish (holat => holat)
const WrappedComponent = hoc (SomeComponent)

Ulanish qo'ng'iroq qilganimizda, biz komponentni o'rash uchun foydalanishimiz mumkin bo'lgan HOCni qaytarib olamiz. Bu erdan biz faqat bizning tarkibiy qismimizga HOCga o'tamiz va HOC qaytadigan komponentdan foydalanishni boshlaymiz.

HOCs bizga bitta asosiy komponentga komponentlar orasidagi mavhum umumiy mantiqiy narsadan iborat.

HOC uchun yaxshi foydalanish holati bu avtorizatsiya hisoblanadi. Siz autentifikatsiya kodini har bir tarkibiy qismga yozishingiz mumkin. Bu sizning kodingizni tez va keraksiz ravishda shishiradi.

HOK-larsiz komponentlar uchun haqiqiyligini qanday aniqlash mumkinligini ko'rib chiqamiz:

HOClardan foydalanib, siz shunga o'xshash narsalarni qilishingiz mumkin:

Yuqorida keltirilgan kod uchun ishlaydigan CodePen parchasi.

Yuqoridagi kodga qarab, biz oddiy tarkibiy qismlarni juda sodda va "soqov" saqlashga qodir ekanligimizni, ularning haqiqiyligini tekshirishni davom ettirishimiz mumkin. AuthWrapper komponenti barcha autentifikatsiya mantiqlarini birlashtiruvchi tarkibiy qismga ko'taradi. Bularning barchasi isLoggedIn nomli qo'zg'atuvchini olib, WrappedComponent yoki paragrafning haqiqiy yoki noto'g'ri ekanligiga qarab qaytaradi.

Ko'rib turganingizdek, HOCs juda foydali, chunki ular bizga kodni qayta ishlatish va shishishni olib tashlashga imkon beradi. Tez orada ushbu mashqlar bilan ko'proq shug'ullanamiz!

3. Reaktsiya holati va setState ()

Ko'pchiligingiz React holatidan foydalandingiz, biz buni HOC misolimizda ham ishlatganmiz. Ammo holat o'zgarganda, React ushbu tarkibiy qismni qayta namoyish qilishni boshlashini tushunish muhimdir (agar siz boshqa komponentni aytmasangiz, "KomponentUpdate" da ko'rsatmaysiz).

Endi vaziyatni qanday o'zgartirish haqida gaplashaylik. Holatni o'zgartirishning yagona usuli - bu SetState usuli. Ushbu usul ob'ektni oladi va uni hozirgi holatga birlashtiradi. Buning ustiga, siz bu haqda bilishingiz kerak bo'lgan bir nechta narsalar mavjud.

Birinchidan, setState asenkron. Bu shuni anglatadiki, siz setState-dan qo'ng'iroq qilganingizdan so'ng aniq yangilanmaydi va bu ba'zi bir og'irlashtiruvchi xatti-harakatlarga olib kelishi mumkin, biz hozir ulardan qochishimiz mumkin!

setState asinxron harakati

Yuqoridagi rasmga qarab, biz setState, keyin esa console.log holatini chaqiramiz. Hisoblagichimizning yangi o'zgaruvchisi 1 bo'lishi kerak, lekin aslida 0. Shunday qilib, agar bizStState aslida yangilangan holatdan so'ng yangi holatga kirishni xohlasak nima bo'ladi?

Bu bizni kelgusi bilimlar to'plamiga olib keladi, biz setState haqida bilishimiz kerak va bu qayta qo'ng'iroq qilish funktsiyasini olishi mumkin. Bizning kodimizni tuzataylik!

Ishlamoqda!

Ajoyib, ishlaydi, endi biz to'g'rimizmi? To'liq emas. Biz aslida bu holatda setState-ni to'g'ri ishlatmayapmiz. Ob'ektni setState-ga o'tkazishning o'rniga biz unga funktsiyani beramiz. Ushbu holat odatda yuqoridagi misolda bo'lgani kabi siz yangi holatni o'rnatishda joriy holatidan foydalanganda ishlatiladi. Agar bunday qilmasangiz, ob'ektni SetState-ga o'tkazishda davom eting. Yana kodimizni yangilaylik!

Endi biz gaplashyapmiz.

Mana bu yuqoridagi o'rnatilganState kodi uchun CodePen.

Ob'ekt o'rniga funktsiyani topshirishning ma'nosi nima? SetState asinxron bo'lgani uchun, yangi qadriyatlarimizni yaratish uchun unga tayanib, ba'zi muammolarga duch kelamiz. Masalan, SetState ishga tushganda, boshqa bir setState mutatsiyaga uchragan bo'lishi mumkin. SetState funktsiyasini o'tish bizga ikkita foyda beradi. Birinchisi, bu bizning davlatimizning hech qachon o'zgarmaydigan statik nusxasini olishimizga imkon beradi. Ikkinchisi, bu SetState qo'ng'iroqlarini navbat bilan bajarilishi va ular ketma-ket ishlashi.

Ikkita ketma-ket Setate qo'ng'irog'i yordamida hisoblagichni 2 ga ko'paytirishga harakat qiladigan quyidagi misolga qarang:

Ilgari odatiy asenk harakati

Yuqorida biz quyida tuzatishni amalga oshirganimizdan oldin ko'rgan narsalarimiz.

Kutilgan xatti-harakatlarimizni olish uchun tuzatish

Yuqoridagi kod uchun CodePen.

Birinchi rasmda, ikkala setState funktsiyalari to'g'ridan-to'g'ri this.state.counter-dan foydalanadi va biz oldinroq bilib olganimizdek, birinchi setState chaqirilgandan keyin this.state.counter nolga teng bo'ladi. Shunday qilib, biz 2 o'rniga 1 ga egamiz, chunki ikkala setState funktsiyalari 1 ga qarshi o'rnatilgan.

Ikkinchi rasmda biz SetState funktsiyasini o'tamiz, bu ikkala setState funktsiyalarini tartibda bajarilishini ta'minlaydi. Buning ustiga, hozirgi, yangilanmagan holatni ishlatishdan ko'ra, u tezkor suratni oladi. Endi biz kutgan natijani 2 ga olamiz.

Reaktsiya holati to'g'risida bilishingiz kerak bo'lgan narsa shu!

4. Kontekstga munosabat bildiring

Bu bizni hozirda tarkibiy qismlar uchun global holat bo'lgan React kontekstiga olib keladi.

React context API sizga har qanday tarkibiy qismga berilishi mumkin bo'lgan global kontekst ob'ektlarini yaratishga imkon beradi. Bu sizga ma'lumotlarni DOM daraxti bo'ylab pastga o'tkazmasdan ma'lumot almashish imkonini beradi.

Xo'sh, kontekstdan qanday foydalanamiz?

Avval kontekst ob'ekti yarating:

const ContextObject = React.createContext ({foo: "bar"})

React dokumentlari sozlamalarning kontekstini quyidagicha tarkibiy qismda tavsiflaydi:

MyClass.contextType = MyContext;

Ammo CodePen-da (16.4.2-reaktsiya) bu ish bermadi. Buning o'rniga biz Dan Abramov tavsiya qilgani kabi kontekstni iste'mol qilish uchun HOC-dan foydalanamiz.

Biz bajarayotgan narsa bu bizning tarkibiy qismimizni Context.Consumer komponenti bilan o'rash va kontekstda prop sifatida o'tish.

Endi biz quyidagiga o'xshash narsani yoza olamiz:

Biz rekvizitlardagi kontekst ob'ekti orqali folga kirish huquqiga ega bo'lamiz.

Siz so'rashingiz mumkin bo'lgan kontekstni qanday o'zgartiramiz. Afsuski, bu biroz murakkabroq, ammo biz yana HOC-dan foydalanishimiz mumkin va u quyidagicha ko'rinishi mumkin:

Keling, buni ko'rib chiqaylik. Birinchidan, biz React.createContext () ga o'tgan ob'ektning boshlang'ich kontekstini olamiz va uni o'rash komponentining holati sifatida belgilaymiz. keyingi holatda biz o'z holatimizni o'zgartirish uchun foydalanadigan usullarni aniqlaymiz. Va nihoyat, biz tarkibiy qismini Context.Provider komponentiga o'rab olamiz. Biz o'z holatimizga o'tamiz va prop qiymatiga o'tamiz. Endi har qanday bolalar bu kontekstda Context.Consumer komponentasi bilan o'ralgan holda olishadi.

Barchasini birlashtirish (HOCs qisqartirish uchun qoldirilgan):

Endi bizning bolalar tarkibiy qismimiz global kontekstga kirish huquqiga ega. Bu holat foo atributini baz holatiga o'zgartirish qobiliyatiga ega.

Kontekst kod uchun to'liq CodePen-ga havola.

5. React bilan doimo xabardor bo'ling!

Ushbu oxirgi tushuncha, ehtimol tushunish uchun eng osondir. Bu shunchaki React-ning so'nggi versiyalaridan xabardor bo'lish. Reaktsiya so'nggi paytlarda jiddiy o'zgarishlarni amalga oshirdi va faqatgina o'sishda va rivojlanishda davom etadi.

Masalan, 16.3-reaktsiyada hayot aylanishining ba'zi usullari eskirgan, 16.6-rezolyutsiyada biz async tarkibiy qismlariga ega bo'lamiz va 16.7-da sinf qismlarini butunlay almashtirishni maqsad qilgan kancalar mavjud.

Xulosa

O'qiganingiz uchun rahmat! Umid qilamanki, sizga yoqdi va React haqida ko'p narsalarni bilib oldingiz. Men faqat o'qishdan juda ko'p narsalarni o'rgandingiz deb umid qilaman, ammo bu xususiyatlarni / savollarni o'zingiz uchun sinab ko'rishingizni maslahat beraman. O'qish - bu bitta narsa, lekin uni o'zlashtirishning yagona usuli - buni o'zingiz qilishdir!

Va nihoyat, faqat kodlashni davom eting. Yangi texnologiyani o'rganish qiyin bo'lib tuyulishi mumkin, ammo keyingi narsani bilsangiz, siz reaktsiya bo'yicha mutaxassis bo'lasiz.

Agar biron bir sharhingiz, savollaringiz bo'lsa yoki biror narsani o'tkazib yuborgan deb o'ylasangiz, ularni quyida qoldiring.

O'qiganingiz uchun yana bir bor rahmat! Iltimos, ulashing, (yoki ikkita) va baxtli kodlashni yuboring.