React + Redux - eng yaxshi amaliyotlar

Ushbu maqola asosan React va Redux bilan keng ko'lamli dasturlarni yaratishda men amal qilgan ba'zi yaxshi amaliyotlarni amalga oshirishga qaratilgan.

Taqdimot komponentlarini va konteyner tarkibiy qismlarini farqlang.

Redux yordamida reaksiya dasturini arxivlashda biz tarkibiy qismlarni taqdimot va konteyner tarkibiy qismlariga bo'lishimiz kerak.

Taqdimot komponentlari bu HTML-ni taqdim etadigan tarkibiy qismlar. Bizning barcha taqdimot qismlarimiz fuqaroligi bo'lmagan komponentlardir, shuning uchun ular holati va aylanish davri kancalariga ehtiyoj qolmasa, funktsional fuqaroligi bo'lmagan komponentlar sifatida yozilgan. Taqdimot komponentlari holat uchun redux-do'kon bilan o'zaro ishlamaydi. Ular rekvizitlar orqali ma'lumot olishadi va uni ko'rsatishadi.

Konteyner komponentlari redux do'konidan ma'lumot olish va taqdimot tarkibiy qismlariga ma'lumotlarni taqdim etish uchun mo'ljallangan. Ular davlatchilikka moyil.

Taqdim etuvchi komponent, ko'rsatilganidek, fuqaroligi bo'lmagan funktsional komponent bo'lishi kerak:

Konteyner komponenti, agar siz React komponentining hayot aylanishi usullaridan foydalanishga majbur qilinmasangiz, funktsional tarkibiy qism bo'lishi kerak.

Ta'kidlash kerak bo'lgan narsalar:

  • Fuqaroligi bo'lmagan funktsional tarkibiy qismlardan foydalanganda yaxshilangan ishlashni ko'rishimiz mumkin. Ushbu komponentlar keraksiz tekshiruvlardan va xotira ajratishlaridan qochishadi va shuning uchun yanada faolroq.
  • Tarkibiy qismlarni va konteyner qismlarini bo'lish orqali komponentni iloji boricha sodda qilib yozsangiz, komponentni sinash juda oson bo'ladi.
Yuborish harakatlarida bindActionCreators-dan foydalaning

Redux voqealarni dispetcherlik qilish tizimi bu davlatni boshqarish funktsiyalarining asosidir. Biroq, harakatni yuborishi kerak bo'lgan har bir tarkibiy qismga dispetcherlik funktsiyasini topshirish zerikarli bo'lishi mumkin.

Buning oldini oling.

Buning oldini oling.

Buning o'rniga buni qiling.

Yuqoridagi kodda filtrTalentPoolDataBySkills bindActionCreators-da ushbu.props.filterTalentPoolDataBySkills sizning harakatlaringizni yuborish uchun mavjud. Kodni uzoq muddatda saqlashni osonlashtiradi.

Redux-dan foydalanganda, setState va komponentlarning hayotiy tsikllaridan foydalanishdan saqlanishga harakat qiling:

Ilova holatini global holatga kelganda redux do'konidan foydalanib boshqaring. Redux kabi davlat boshqaruv kutubxonalaridan foydalanganda komponentingizni setState-dan foydalanmaslikka harakat qiling. Agar mantiqiy ma'noga ega bo'lsa, komponent holatini foydalaning. Tugmachalar tarkibini ko'rsatganda tugma komponentasi Redux-dan foydalanmaydi.

Buni qilmaslikka harakat qiling.

Buning o'rniga buni qiling.

Bu erda biz holatni olish va to'g'ridan-to'g'ri ko'rinishda ko'rsatish uchun redux do'konidan foydalanganmiz. Qayta o'rnatishStState va komponentli tsikl kancalaridan yana foydalanishning hojati yo'q. Redux siz uchun davlat boshqaruvi bo'yicha ishni bajarish uchun bor.

.Bind () -dan foydalanish:

Shaxsiy tarkibiy qismning ushbu doirasini bog'lashning ikkita usuli mavjud.

  1. Ularni konstruktor bilan bog'lash.

Ushbu usul bilan komponentlarni yaratish vaqtida faqat bitta qo'shimcha funktsiya yaratiladi va bu funktsiya, agar yana bajarilsa ham ishlatiladi.

2. Tarqatish paytida majburiy qiymat sifatida.

.bind () usuli har safar ishga tushirilganda yangi funktsiyani yaratadi, bu usul har safar render funktsiyasi bajarilganda yangi funktsiya yaratilishiga olib keladi. Bu ba'zi bir ta'sirga ega. Kichik dasturlarda biz ularni sezmaymiz, bu erda katta dasturlarda bo'lgani kabi biz ham ularni ko'ra olamiz. Demak, uni props qiymat sifatida o'tish paytida funktsiyani bog'lab qo'yish mumkin emas.

Qaror:

  1. O'zingizning maxsus funktsiyalaringizni konstruktor bilan bog'lash yaxshiroqdir.
  2. Class xususiyatlari transform deb nomlangan Babel plagini mavjud. Siz semiz strelkali sintaksis yordamida avtomatik bog'lanish funktsiyasini yozishingiz mumkin.

Agar biz yuqoridagi kodni ko'rsak, bog'laydigan funktsiyalar yo'q.

Aksessuar funktsiyalaridan foydalaning

Kodni qayta ishlab chiqarishni yaxshilash uchun filtrlash, tahlil qilish va boshqa ma'lumotlarni almashtirish mantiqlarini amalga oshiradigan barcha funktsiyalaringizni alohida faylga o'tkazing va ularni reaktsiyani qayta ulash usulingiz ichida ko'rsatilgan funktsiyalardan foydalanish uchun import qiling.

Buning yordamida sizning funktsiyalaringizga oqim turlarini qo'shish oson bo'ladi.

ES6 xususiyatlari yordamida tozalovchi kodni yozing

Toza kodni yozish, ishlab chiquvchilarga kodni tushunish va saqlashni osonlashtiradi. ES6 xususiyatlari bizga React-da kodni yozishning yanada toza usulini taqdim etadi.

Yo'q qilish va tarqatish atributlaridan foydalaning:

Buning oldini oling.

Buning o'rniga buni qiling.

Ok funktsiyalaridan foydalaning:

Buning oldini oling:

Buning o'rniga buni qiling.

Oqim turlaridan foydalaning

Bir narsa, JS kelajagi bo'lishi kutilayotgan tip tekshiruvi. Umuman olganda, ko'plab ishlab chiquvchilar oqim va matn yozuvi o'rtasida nimani amalga oshirish kerakligi va qanday qilib muammosiz joriy loyihaga qo'shilishi mumkinligi o'rtasida chalkashliklar mavjud.

Typecript hozirgi loyihaga qo'shilish uchun ancha murakkab va oqim sodda bo'lib, u sizning kodlashingizni kutilganidek kamroq tekshirishi mumkinligi haqida ogohlantiradi.

Javascript loyihasi termasdan ko'paygani sayin, qayta ishlash yanada qiyinlashadi. Loyihaning hajmi qanchalik katta bo'lsa, qayta ishlab chiqarishda xavf katta bo'ladi. Tekshiruv turidan foydalanish xavfni to'liq bartaraf etmasligi mumkin, ammo bu uni sezilarli darajada kamaytiradi.

Oqimdan foydalanishning afzalliklari:

  1. Xatolar yoki xatolarni vaqtida aniqlashda.
  2. Funktsiyaning maqsadi haqida xabar beradi.
  3. Xatolarni boshqarish bilan ishlov berishning murakkabligi.
  4. Runtime tipidagi xatolar o'chiriladi.
JQuery ajax orqali http so'rovlari uchun aksios kutubxonasidan foydalaning:

Fetch API va aksiyalar http so'rovlarini amalga oshirishning eng maqbul usulidir. Ushbu ikkitasi orasida axios kutubxonasidan foydalanishning bir qator afzalliklari mavjud. Ular

  • Bu so'rovni amalga oshirishdan oldin yoki javob qabul qilingandan so'ng ma'lumotlarga o'zgartirishlarni amalga oshirishga imkon beradi.
  • Bu sizga so'rov yoki javobni to'liq o'zgartirishga imkon beradi (sarlavhalar ham). so'rov yuborilgunga qadar yoki va'da berilgunga qadar asinx operatsiyalarini bajaring.
  • O'rnatilgan XSRF himoyasi.
O'zingizning tarkibiy qismlaringizni jihozlash uchun uslubli komponentlardan foydalaning

Stil-komponentlarning asosiy g'oyasi uslublar va tarkibiy qismlar o'rtasidagi xaritani olib tashlash orqali eng yaxshi tajribalarni joriy etishdir. Shunday qilib, siz tarkibiy qismlarni tegishli uslublar bilan ajratishingiz mumkin - natijada global css nomlar maydonini ifloslantirmaydigan mahalliylashtirilgan sinf nomlari paydo bo'ladi.

Agar siz styled-komponentlardan foydalanishga qaror qilsangiz, satrlarda sintaksisni ta'kidlashni qo'llab-quvvatlash uchun plaginni o'rnatishni unutmang yoki ehtimol yangisini yaratishda yordam berishingiz mumkin.

Masalan:

Reaktsiya komponentlarini sinab ko'ring

Birlikni tekshirishning maqsadi dasturning har bir qismini ajratish va alohida qismlar to'g'ri ishlayotganligini tekshirishdir. U sinov qilinadigan dasturiy ta'minotning eng kichik qismini kodning qolgan qismidan ajratib turadi va u siz kutganingiz kabi harakat qilishini aniqlaydi. Biz xatolarni erta bosqichda topishimiz mumkin.

React to komponentni sinab ko'rish uchun biz Jest va Enzimdan foydalanamiz. Jest Facebook tomonidan yaratilgan va javascript va reaktsiya kodini sinash uchun sinov maydonchasidir. Sinov vositasi bo'lgan Airbnb fermenti bilan birgalikda sizning React dasturingizni osongina sinab ko'rish uchun eng zo'r tanlovga aylantiradi.

Kodlash konvensiyalari uchun ES Lint-dan foydalaning.

Yaxshi ishlaydigan loyihalar avtomatlashtirilgan ijro etilishi bilan aniq izchil kodlash konventsiyalariga ega. Tekshirish uslubidan tashqari, linters shuningdek, o'zgaruvchan sohaga tegishli bo'lgan ba'zi bir xatolar sinfini topish uchun juda yaxshi vositadir. Tasdiqlanmagan o'zgaruvchilarga tayinlash va aniqlanmagan o'zgaruvchilardan foydalanish, ular vaqtida aniqlanishi mumkin bo'lgan xatolarga misoldir.

Reaktiv reaktsiya uchun eslint-plagin-reaktsiya bilan maxsus tinting qoidalari o'ting.

Linting oqimi turlari uchun eslint-plagin-oqim turi va eslint-plagin-flowtype-xatolari mavjud.