2019 ReactJS eng yaxshi amaliyotlar

[yangilash, 22-may, 2019-yil] - ro'yxatga yana bitta eng yaxshi amaliyot qo'shing. Pastga qarang.

[yangilash, 2019 yil 19-may] - Redux va Redux-Thunk haqida yangi maqola qo'shdik. Shunchaki ko'plab misollar bilan tushuntirib bering.

[yangilash, 2019 yil 23 iyul] - Ko'p so'rovlar tufayli biz ReactJS ANTIpatterns haqida yangi maqola qo'shamiz. Havola shu erda joylashtiriladi. Iltimos, qarsak bilan qo'llab-quvvatlang. Rahmat!

1. Xush kelibsiz, ReactJS

So'nggi besh yil ichida ReactJS tez sur'atlar bilan o'sib bormoqda va 2018 yil boshiga kelib, hech bo'lmaganda Google qidiruvlari nuqtai nazaridan jQuery-ga qaraganda ko'proq mashhur bo'ldi. Biz qidiruv tizimlarida ularning talabiga ko'ra vositalarni taqqoslamaymiz; ammo, bu bizga ReactJS kutubxonasi shubhasiz mashhur ekanligi to'g'risida aniq tushuncha beradi. Aytganingizdek, Front-End dasturlarini yaxshiroq yaratish uchun ReactJS-dan foydalanish haqida gaplashaylik.

Yozuvlarimizdan zavqlanishingizni ko'rib, juda xursand bo'lamiz. Shunday qilib, agar siz ushbu xabarni foydali deb bilsangiz, iltimos below tugmachasini bosing :)

Facebookni yaratganidan tashqari, ReactJS ni shunchalik mashhur qiladigan narsa nima? Biz ReactJS bilan ishlash uchun to'g'ri bo'lganligi sababli, deb o'ylaymiz. O'rganish juda oson va virtual DOM-dan foydalanib ishlash uchun optimallashtirilgan. Virtual DOM-ni amalga oshirish bilan, ReactJS faqat yangilanishi kerak bo'lgan elementlarni tezda qayta namoyish etish usulini taklif qiladi. Natijada, ReactJS ishlab chiquvchilari tez va yoqimli ilovalarni olishmoqda.

ReactJS - bu dasturlarni yaratish uchun JavaScript-dan foydalanadigan kutubxona. ReactJS-da ilovalar yaratishni boshlash uchun siz uning API-ni o'rganishingiz va JavaScript-ni bilishingiz kerak. JavaScript hozirgi kunda eng ommabop dasturlash tilidir. ReactJS shuningdek, dasturchilarga dasturni UI tarkibiy qismlarida modellashtirish va tavsiflash imkoniyatini beradi. Shunday qilib, siz nima qilish kerakligini aytasiz va ReactJS buni qanday qilishni biladi.

Google'ning so'nggi besh yildagi tendentsiyalari:

ReactJS-ning asosiy tushunchalaridan biri bu qayta ishlatiladigan, birlashtiruvchi qismlarni yaratishingiz va ularni birlashtirib, ilova yaratishingizdir. Har bir tarkibiy qism o'z holatiga ega bo'lishi mumkin, agar u unchalik katta bo'lmasa (bu haqda keyinroq). ReactJS sizning barcha komponentlaringizni bitta chelakka to'playdi va brauzeringizda ilovani samarali ishlashi uchun virtual DOM kabi ba'zi optimallash usullarini qo'llaydi.

Keling, tarkibiy qism nima ekanligini va nima emasligini aniqlaylik. Komponent UIning o'zi mustaqil, mustaqil qismidir. Har bir tarkibiy qism boshqa komponentlarni joylashtirishi mumkin, bu erda har birida uning holati va API mavjud. An'anaga ko'ra, siz komponentlarga tegishli kodni bitta papkada saqlashingiz kerak. Har bir tarkibiy qism uchun barcha fayllarni bitta papkada saqlash, siz boshqa dasturlarda foydalanishingiz uchun qayta ishlatiladigan komponentlarni yaratishga imkon beradi.

2. ReactJS komponentlarining turlari

ReactJS tarkibiy qismlarining to'rtta asosiy turi mavjud:

  1. Shtat tarkibiga kiruvchi yoki to'liq tarkibiy qismlar
  2. Kam yoki funktsiyaga asoslangan komponentlar
  3. Taqdimot (yoki yuqori buyurtma) komponentlar
  4. Konteyner tarkibiy qismlari

Chapda sizning komponentlaringiz daraxtining afzal tuzilishi ko'rsatilgan.

To'liq tarkibiy qismlar yoki sinfga asoslangan komponentlar

Davlatning to'liq tarkibiy qismi uning holati va bu holat bilan bog'liq bo'lgan ma'lumotlarga ega. Ushbu turdagi komponentlar ichidagi ma'lumotlarni davlat yoki rekvizit ob'ektlari orqali uzatishingiz mumkin. To'liq tarkibiy qismlarni qo'llab-quvvatlash qiyinroq, chunki ular ba'zi ma'lumotlarni saqlamaydi va ilovaning global holatini o'zgartirishi mumkin. Shuningdek, to'liq tarkibiy qismlar bu ko'pincha konstruktorga ega bo'lgan sinfga asoslangan komponentlardir (bu sizning konstruktorda sizning tarkibiy qismingiz holatini belgilashning eng yaxshi usuli hisoblanadi).

ReactJS-ning to'liq, sinfga asoslangan tarkibiy qismiga misol:

Proplar o'zgarmas va bir tomonga bog'langan, shuning uchun ularni tarkibiy qismingizda o'zgartira olmaysiz. Komponentning holatini o'rnatish va uning foydalanuvchi interfeysini ko'rsatish uchun siz rekvizitlardan foydalanasiz. Agar siz tarkibiy qismdagi rekvizitlarni o'zgartirishga harakat qilsangiz, sizda Type қатosi paydo bo'ladi.

Davlat - bu tarkibiy qismga duchor bo'lgan ob'ekt. Davlat miqyosi, u e'lon qilingan tarkibiy qism bilan cheklangan. Komponentlar holatni boshlashi va uni boshqa tarkibiy qismga o'tkazishi mumkin. Biz davlatni ikki yo'l bilan, konstruktordan foydalangan holda yoki davlat mulkini e'lon qilishimiz mumkin. Ikkinchi holda, bu shunchaki sintaktik shakar, va translyator (masalan, Babel) sizning davlat mulkingiz deklaratsiyasini kaput ostidagi konstruktorga aylantiradi. Vaziyat kam bo'lgan komponentlar yoki funktsiyaga asoslangan komponentlar va Funktsiyaga asoslangan komponentlar uchun React Hooks bu oddiy JavaScript funktsiyalari. Funktsiyaga asoslangan komponentlar ReactJS elementini yoki to'plamni qaytaradi, bu "qisman tarkibiy qism" bo'lishi mumkin, masalan <> ... yoki mantiqiy va ichki qismlarga ega bo'lgan to'liq funktsiyaga asoslangan komponent. Funktsiyaga asoslangan komponentda konstruktorni ishlata olmasligingiz sababli (ReactJS v16.8 beri) siz komponentingizni to'liq holatga o'tkazolmaysiz. Bu kam, chunki siz ushbu turdagi tarkibiy qismlarda biron bir ma'lumotni saqlay olmaysiz. Siz ko'pincha UI-ni ko'rsatish uchun funktsiyalarga asoslangan komponentlarga murojaat qilasiz. Bu kam, funktsiyaga asoslangan ReactJS komponentiga misoldir.

Ishlash nuqtai nazaridan, sinfga asoslangan komponentlardan foydalanish va funktsiyaga asoslangan komponentlardan foydalanish o'rtasida deyarli farq yo'q. ReactJS ko'rsatish mexanizmi biz uchun optimallashtirish uchun etarlicha aqlli.

Funktsiyaga asoslangan komponentlar bilan ishlash osonroq va sinash uchun qulayroqdir. Shu sababli, ReactJS ishlab chiquvchilari hamjamiyati sizni sinfga asoslanganlar o'rniga funktsiyalarga asoslangan tarkibiy qismlarni yozishga majbur qiladi. Funktsiyasiz davlatga asoslangan komponentlar ba'zi cheklovlarga ega va davlatni boshqarish uchun bitta global joyga ega bo'lishi kerak. Bu ReactJS yozish komponentlarining paradigmasidan farq qiladi (batafsil ma'lumot uchun, quyida ko'rib chiqing).

Ishlab chiquvchilarga to'liq, funktsiyaga asoslangan tarkibiy qismlarni yozish va shu bilan birga hayot va tsikl usullarini ishlatish qobiliyatini berish uchun React v16.8 React Hooks deb nomlangan yangi xususiyatni qo'shdi. Aslida, React Hooks - bu sinfga asoslangan tarkibiy qismlarni o'chirishga urinish. React Hooks yordamida siz to'liq funktsiyalarga asoslangan tarkibiy qismlarni sinflardan foydalanmasdan yozishingiz mumkin. Ehtimol, kelajakda biron bir joyda kanca bilan olib tashlangan sinfga asoslangan tarkibiy qismlarni ko'ramiz.

React Hooks, shuningdek, sinf deb e'lon qilingan bo'lsa ham, konstruktorlarga ega bo'lmagan yoki kerak bo'lmagan tarkibiy qismlardan qochib, dastur dizaynini soddalashtirishga qaratilgan. Agar siz o'zingizning ilovangizning ideal dizayni haqida o'ylasangiz, ko'pincha kam ishlaydigan tarkibiy qismlar bilan ishlaysiz. Mijozlarimiz uchun ReactJS dasturlarini yaratishda, odatda, bizning tarkibiy vakilligimiz va dastur mantig'i o'rtasida nozik bir qatlam qo'llaniladi. Bu bizga uning xatti-harakatlaridan tarkibiy qismning vizual tarkibini aniqlashga imkon beradi.

3. Ma'lumotni pastga tushirish, harakatlar

«Data Down, Actions Up» dizayn naqsh nima? Aslida, bu sizning "props" dagi ma'lumotlarni qabul qiladigan va ularni o'z ko'rinishi yoki ichiga joylashtirilgan tarkibiy qismlarga o'tkazadigan yuqori buyurtma (HOC - tushuntirishga qarang) tarkibiy qismiga egaligingizni anglatadi. Komponent bilan o'zaro ishlash uchun foydalanuvchilar tugmachani bosish kabi harakatlarni amalga oshiradilar va komponent voqealarni tarqatish orqali o'zaro ta'sirga javob beradi. Demak, bu ma'lumotlar qanday uzatilayotganiga teskari yo'nalishdagi hodisani qo'zg'atadi.

Ushbu hodisalar yoki harakatlar ota-ona komponentlariga uzatiladi. Ota-onalar komponenti global dastur holatini o'zgartiradigan yana bir harakatni amalga oshiradi.

4. Yuqori tartibli komponent

Yuqori buyurtma komponenti (yoki HOC) aslida bezak naqsh sifatida tanilgan dizayn naqshidir. ReactJS-da, HOC bu qo'shimcha funktsionallik yoki qo'shimcha xususiyatlar qo'shib, boshqa komponentni o'rab oladigan tarkibiy qism. Bu keng tarqalgan ishlatiladigan mantiqdan mavhumlashtirishga imkon beradi va DRY kodingizni saqlab qoladi. Bu siz ReactJS-dagi boshqa tarkibiy qismlar o'rtasida murakkab tarkibiy tuzilmani qanday tarqatishingiz va dastur mantiqiyligi va UI-ni aniqlash usulidir. Masalan, siz taqdimot tugmasi komponenti uchun HOC sifatida konteyner komponentidan foydalanishingiz mumkin.

HOC ReactJS komponentiga misol:

5. Konteyner tarkibiy qismlari

Boshqa tomondan, konteyner tarkibiy qismlari holatni belgilash uchun mantiqqa ega yoki voqealarni ota-komponentga qadar chiqaradigan funktsiyalarga ega. Bosh barmog'ingizning umumiy qoidasi - Yagona Mas'uliyat Printsipi dizayni printsipi asosida tarkibiy qismingizni iloji boricha sodda saqlash, bu sizning tarkibiy qismingiz bitta narsani bajarishi kerakligini anglatadi, lekin buni yaxshi bajaring. Ko'pincha, ushbu turdagi komponentlar juda oz taqdimot komponentlarini joylashtiradigan HOClardir. Taqdim etuvchi komponentlar Oddiy tarkibiy qismlarni yozish sizning dasturingizni murakkablashtirishi mumkin. Bu erda taqdimot komponentlari o'ynaydi. Ushbu komponentlar mantiqiy minimal bo'lishi kerak. Taqdimot komponentlari ma'lumotlarni qabul qiladi va rekvizitlarning bir qismi sifatida qabul qilinadigan qayta qo'ng'iroqqa hodisalarni tarqatadi. Aslida, ushbu turdagi komponent UIni ko'rsatadi va UIda biron bir harakat sodir bo'lganda unga berilgan funktsiyani bajaradi. Ushbu turdagi komponentlar qurilish blokidir va ba'zan past darajali komponent (yoki LOC) deb nomlanadi.

6. Eng yaxshi amaliyotlar ro'yxati

  • [2019 yil 22-may kuni yangilang] - ReduxJS-dan foydalanganda Reducer-da ulkan JSON-ni oldini olish uchun Reducer kodini kichikroq usullarga ajrating.
  • Agar bunday qilmasangiz, TypeScript-ni o'zingizning ilovangizda ko'rib chiqing.
  • ReactJS ilovasini yuklash uchun yaratish-reaktsiya-ilova generatoridan foydalaning.
  • DRY kodingizni saqlang. O'zingizni takrorlamang, lekin yodda tuting, kodning nusxasi har doim ham yomon narsa emas.
  • Katta sinflar, usullar yoki tarkibiy qismlarga, shu jumladan Reducers-ga ega bo'lishga harakat qiling.
  • Redux kabi dasturlar holatini boshqarish uchun ko'proq ishonchli menejerlardan foydalaning.
  • Redux-Thunk kabi hodisalar sinxronizatoridan orqa tomoningizdagi API bilan o'zaro aloqada foydalaning.
  • Juda ko'p atributlar yoki bahslarni o'tkazishdan saqlaning. O'zingizning tarkibiy qismingizga kiradigan beshta rekvizit bilan cheklang.
  • ReactJS defaultProps va ReactJS propTypesidan foydalaning.
  • Linterdan foydalaning, juda uzun chiziqlarni ajrating.
  • O'zingizning jslint konfiguratsiya faylingizni saqlang.
  • NPM yoki ip kabi har doim qulflash fayli bilan bog'liqlik menejeridan foydalaning.
  • Umumiy kirish kodi, murakkab va xatolarga moyil bo'lgan kodni sinab ko'ring.
  • Kodingizni ozgina kuch sarflab va uning to'g'ri ishlashini ta'minlash uchun sinov kodi bilan ko'proq sinov qamrovini beradigan ko'proq testlarni yozing.
  • Har safar xato topsangiz, avval sinov yozganingizga ishonch hosil qiling.
  • React Hooks-dan foydalanib, funktsiyalarga asoslangan tarkibiy qismlardan foydalaning, bu to'liq tarkibiy qismlarni yaratish uchun yangi ReactJS usuli.
  • Sizning rekvizitlaringiz uchun ES6 demontajidan foydalaning.
  • Shartli ko'rsatishni qo'llang.
  • Foydalanuvchi `map () 'komponentlarini yig'ish va namoyish qilish.
  • Qisman qismlardan foydalaning, masalan, `<>` ... ``
  • Hodisa ishlov beruvchilariga "handleClick ()" yoki "handleUpdate ()" kabi prefiksli nom bering.
  • Kirishlaringizni boshqarish uchun `onChange`-dan foydalaning, masalan, 'onChange = {this.handleInputChange ()}'.
  • ReactJS kodini sinash uchun JEST-dan foydalaning.

Biz Redux-Thunk kabi voqea sinxronizatorlarini eslatib o'tdik. ReactJS v16.3 React Context API deb nomlangan yangi xususiyatni taqdim etdi. Uning funktsional qismining bir qismi - redux-thunk funktsiyalariga taqlid qilish va hodisalarni ReactJS vositalari bilan sinxronlashtirish. Bu juda talab qilinadigan xususiyatdir, chunki deyarli har qanday ReactJS dasturi so'nggi API-ni qo'llab-quvvatlash uchun gaplashmoqda va so'rovlar va hodisalarni sinxronlashi kerak. Biz ushbu API-ni kuzatib boramiz va sizni yangilanishlar bilan xabardor qilamiz.

Bu erda defaultProps va propTypes-dan foydalanish misollari keltirilgan:

7. Xulosa

Umid qilamizki, ushbu maqola 2019 yilda juda mashhur bo'lgan ReactJS-ning eng yaxshi amaliyotlari va naqshlari haqida ba'zi narsalarni ochib beradi. Bonus sifatida quyida keltirilgan boshqa maqolani ko'ring, shuningdek siz yangilanishlarni olish uchun ReactJS haqida bepul yangilanishlar va yangi o'quv materiallari uchun ro'yxatdan o'tishingiz mumkin. Yana bitta narsa bor ...

Bizga chindan ham kerak! Agar siz ushbu xabarni foydali deb bilsangiz, iltimos quyida tugmachasini bosing :) Mana bu siz uchun birinchi biznikidir. Sen ajoyibsan!

.

Bonus materiallari: Bu erda Redux va Redux-Thunk haqidagi so'nggi maqolamiz. Ikkisi birgalikda qanday ishlashini tushuntiramiz.

https://medium.com/@konstankino/2019-redux-and-redux-thunk-for-reactjs-explained-e249b70d6188