Reaktsiyada rivojlanayotgan naqshlar

Funktsionallikni yozish va qayta ishlatishning cheksiz imkoniyatlari

React ekotizimida vujudga keladigan ba'zi naqshlarni batafsil ko'rib chiqaylik. Ushbu naqshlar o'qilishini, kodni aniqligini yaxshilaydi va kodni kompozitsion va qayta ishlatishga yo'naltiradi.

Men 3 yil oldin React bilan ish boshladim. O'sha paytda, uning imkoniyatlaridan foydalanish uchun o'rganish kerak bo'lgan amaliyot mavjud emas edi.

Jamiyat bir necha g'oyalarni hal qilishi uchun ikki yil vaqt kerak bo'ldi. Biz React.createClass-dan ES6 sinfiga va sof funktsional qismlarga o'tdik. Biz aralashmalarni tashladik va API-larimizni soddalashtirdik.

Jamiyat har qachongidan ham kattaroq bo'lganligi sababli, biz bir nechta chiroyli naqshlarni ko'rmoqdamiz.

Ushbu naqshlarni tushunish uchun sizga React tushunchalari va uning ekotizimi haqida asosiy tushuncha kerak. Iltimos, iltimos, e'tibor bering, ushbu maqolada men ularni qamrab olmayman.

Boshlaymiz!

Shartli shart

Men quyidagi stsenariyni ko'plab loyihalarda ko'rganman.

Odamlar React va JSX haqida o'ylashganda, ular hali ham HTML va JavaScript nuqtai nazaridan o'ylashadi.

Shunday qilib, tabiiy qadam shartli mantiqni haqiqiy qaytish kodidan ajratishdir.

Bu nazoratdan chiqib ketishga intiladi, har bir ko'rsatish funktsiyasining boshida bir nechta ternalar mavjud. Ma'lum bir element qachon ko'rsatilishini yoki qilmasligini tushunish uchun siz doimo funktsiyaning ichiga sakrab o'tishingiz kerak.

Shu bilan bir qatorda, quyidagi namunani sinab ko'ring, bu erda siz tilning ijro etilish modelidan foyda ko'rasiz.

Agar shart noto'g'ri bo'lsa, && operatorining ikkinchi operandasi baholanmaydi. Agar bu to'g'ri bo'lsa, ikkinchi operand - yoki biz ko'rsatmoqchi bo'lgan JSX - qaytariladi.

Bu bizga UI mantig'ini haqiqiy UI elementlari bilan deklarativ tarzda aralashtirishimizga imkon beradi!

JSX-ga ishoning, chunki bu kodingizning ajralmas qismi! Oxir oqibat, bu faqat JavaScript.

Pastki qismlarga o'tish

Ilovangiz o'sib ulg'ayganida, siz boshqa qismlarga konteyner vazifasini bajaradigan kichikroq qismlarga egasiz.

Bu sodir bo'lganda, siz yaxshi rekvizitlarni tarkibiy qismdan o'tkazishingiz kerak. Komponent ularga kerak emas, lekin uning bolalari buni qilishadi.

Buni chetlab o'tishning yaxshi usuli, bu erda ko'rib turganingizdek, JSX tarqalishi bilan birga vayron qiluvchi rekvizitlardan foydalanish:

Shunday qilib, endi siz tafsilotlar uchun kerak bo'lgan rekvizitlarni o'zgartirishingiz mumkin va bu rekvizitlar bir nechta tarkibiy qismlarga murojaat qilinmaganligiga ishonch hosil qiling.

Propsni buzish

Vaqt o'tishi bilan ilova o'zgaradi va tarkibiy qismlaringiz ham o'zgaradi. Ikki yil oldin siz yozgan tarkibiy qism davlatga aylanishi mumkin edi, ammo endi u fuqaroligi bo'lmagan qismga aylantirilishi mumkin. Boshqa yo'l ham ko'p marta sodir bo'ladi!

Biz rekvizitlarni buzish haqida gaplashdik, shuning uchun men kelajakda mening hayotimni osonlashtirish uchun ishlatadigan yaxshi hiyla. O'zingizning rekvizitlaringizni ikkala turdagi tarkibiy qismlar uchun shunga o'xshash tarzda yo'q qilishingiz mumkin, quyida ko'rishingiz mumkin:

E'tibor bering, 2–4 va 11–13 qatorlar bir xil. Ushbu naqsh yordamida tarkibiy qismlarni o'zgartirish ancha oson. Bundan tashqari, siz ushbu tarkibiy qismdan foydalanishni cheklaysiz.

Provayder namunasi

Biz rekvizitlarni boshqa komponent orqali yuborish kerak bo'lgan misolni ko'rib chiqdik. Ammo agar siz uni 15 ta tarkibiy qismga yuborishingiz kerak bo'lsa nima bo'ladi?

Reaktiv kontekstni kiriting!

Bu har doim React-ning eng tavsiya etilgan xususiyati emas, lekin u kerak bo'lganda ishni bajaradi.

Yaqinda Kontekstda provayder naqshini qutidan tashqarida amalga oshiradigan yangi API olinayotganligi e'lon qilindi.

Agar siz React Redux yoki Apollo kabi narsalarni ishlatsangiz, siz naqsh bilan tanish bo'lishingiz mumkin.

Uning bugungi API bilan qanday ishlashini ko'rish sizga yangi API-ni tushunishga yordam beradi. Siz quyidagi qum qutisi bilan o'ynashingiz mumkin.

Provayder deb nomlangan yuqori darajadagi komponent kontekstda ba'zi qiymatlarni belgilaydi. Iste'molchilar deb nomlangan bolalar komponentlari ushbu qadriyatlarni kontekstdan olib tashlaydi.

Mavjud kontekst sintaksisi biroz g'alati, ammo yaqinlashib kelayotgan versiyada ushbu aniq naqsh qo'llaniladi.

Yuqori buyurtma komponentlari

Qayta foydalanish mumkinligi haqida gapiraylik. Eski React.createClass () zavodini tashlab yuborish bilan bir qatorda, React jamoasi ham aralashmalar uchun qo'llab-quvvatlovni bekor qilishdi. Ular qaysidir ma'noda oddiy ob'ekt tarkibi orqali tarkibiy qismlarni tuzishning standart usuli edi.

Yuqori tartibli tarkibiy qismlar - HOCs bundan buyon bir nechta komponentlarda xatti-harakatlarni qayta ishlatish zaruratini to'ldirish uchun chiqdi.

HOC kirish komponentini oladigan va ushbu komponentning kengaytirilgan / o'zgartirilgan versiyasini qaytaradigan funktsiya. Siz turli nomlar ostida HOC-larni topasiz, lekin men ularni dekorativ deb bilishni yaxshi ko'raman.

Agar Redux-dan foydalanayotgan bo'lsangiz, ulanish funktsiyasi HOC ekanligini bilib olasiz - bu sizning tarkibiy qismingizni oladi va unga bir nechta rekvizitlar qo'shadi.

Mavjud tarkibiy qismlarga rekvizitlar qo'sha oladigan asosiy HOCni yarataylik.

Agar siz funktsional dasturlashni yaxshi ko'rsangiz, siz yuqori buyurtma komponentlari bilan ishlashni yaxshi ko'rasiz. Recompose bu ajoyib dasturlar to'plami bo'lib, bu sizga yoqimli yordamchi dasturlar, masalan, WithProps, withContext, hayot aylanishi va hokazolarni taqdim etadi.

Qayta foydalanish funktsiyasining juda foydali misolini ko'rib chiqaylik.

Marshrut ichida sezgir tarkibni ko'rsatmoqchi bo'lsangiz, siz autentifikatsiya bilan foydalanishingiz mumkin. Ushbu tarkib faqat tizimga kirgan foydalanuvchilar uchun mavjud bo'ladi.

Bu sizning ilovangizning umumiy muammosi bo'lib, u bitta joyda amalga oshiriladi va butun ilovada qayta ishlatilishi mumkin.

Biroq, HOCsning kamchiliklari bor. Har bir HOC sizning DOM / vDOM tizimingizda qo'shimcha reaktsiya komponentini taqdim etadi. Bu sizning dasturingiz miqyosida ishlashi mumkin bo'lgan muammolarga olib kelishi mumkin.

HOC bilan bog'liq ba'zi qo'shimcha muammolar Maykl Jeksonning ushbu ajoyib maqolasida jamlangan. U HOC-larni biz kelgusida gaplashadigan uslub bilan almashtirishni taklif qilmoqda.

Propsni yuboring

Rost rekvizitlari va HOC-lar bir-birining o'rnini bosishi haqiqat bo'lsa-da, men boshqalarni bir-biridan ustun qo'ymayman. Ikkala naqsh ham qayta foydalanish mumkinligi va kodning ravshanligini oshirish uchun ishlatiladi.

Gap shundaki, siz o'z funktsiyangizni boshqarish funktsiyasini boshqa tarkibiy qismga o'tkazasiz, shunda u sizga funktsiyani boshqarish funktsiyasi orqali orqaga qaytaradi.

Ba'zi odamlar buning uchun dinamik rekvizitdan foydalanishni afzal ko'rishadi; ba'zilari shunchaki this.props. kids-dan foydalanadilar.

Bilaman, bu haligacha chalkash, ammo oddiy misolni ko'rib chiqaylik.

Bu erda biz bolalarni render sifatida ishlatamiz. komponentining ichiga biz parametr sifatida pozitsiyani oladigan funktsiyani yuboramiz.

Render rekvizitlari sizning tarkibiy qismingizda bir necha marotaba qayta ishlatiladigan mantiqqa ehtiyoj sezadigan va komponentingizni HOCga o'rashni xohlamagan holatlarda ishlatilishi mumkin.

React-Motion render rekvizitlaridan foydalanishning ajoyib namunalarini taqdim etadigan kutubxonalardan biridir.

Va nihoyat, qanday qilib asinx oqimlarini render rekvizitlari bilan birlashtirishimiz mumkinligini ko'rib chiqamiz. Mana, reusableFetch komponentini yaratishning yaxshi namunasi.

Men Sandbox havolasini baham ko'rmoqdaman, shunda siz u bilan o'ynashingiz va natijalarini ko'rishingiz mumkin.

Bitta komponent uchun bir nechta render rekvizitlari bo'lishi mumkin. Ushbu naqsh yordamida siz funktsiyani kompozitsiyalash va qayta ishlatish uchun cheksiz imkoniyatlarga egasiz.

Siz qanday naqshlardan foydalanasiz? Ularning qaysi biri ushbu maqolaga mos keladi?