PRDXNning eng yaxshi reaktsiyalari

Facebook's React - bu foydalanuvchi interfeyslarini yaratish uchun deklarativ, samarali va moslashuvchan JavaScript kutubxonasidir.

React-da birinchi marta kod yozishni boshlaganimda eslayman, juda ko'p turli xil yondoshuvlar bo'lgan: tutorialdan tutorialgacha. Shunday qilib, PRDXN-dagi jamoam va biz hammamiz tezroq va tezroq ko'tarilishga yordam beradigan qo'llanma / eng yaxshi amaliyotlar ro'yxatini (BP) topdim.

Facebook's React - bu foydalanuvchi interfeyslarini yaratish uchun deklarativ, samarali va moslashuvchan JavaScript kutubxonasidir.

Quyida bizning qo'llanma mavjud. Umid qilamizki, bu sizga React-ni qabul qilish va undan foydalanishni tezlashtirishga yordam beradi; siz yangi boshlayotgan / tajribali ishlab chiqaruvchisiz.

1. Jildning tashkillashtirilgan tarkibini saqlash:

Har qanday dasturlash / kodlash loyihasida bo'lgani kabi, bu juda muhim! Agar sizning loyiha fayllaringiz mantiqiy tartibda tashkil etilmagan bo'lsa, siz va sizning sheriklaringiz adashib, fayllarni qidirish yoki noto'g'ri fayllarni tahrirlash uchun qimmatli vaqtni sarflashlari mumkin.

PRDXN-da biz hamma narsani osonlashtiradigan va kamroq asabiylashtiradigan quyidagi jild tuzilishini o'ylab topdik. Tomosha qilish uchun "Ijro" ni bosing.

2. Komponentlar - daraxtlar va daraxtlar. Hey siz Javascript Lumberjacksiz!

Komponentlar reaktsiyaning yuragi. Reaktsiya komponenti asosan UIning har qanday qismi.

Mijoz mantiqiy guruhlarini yaratish (guruhlash): Har doim tarkibiy qismlarni bo'linmalarga bo'ling (aka mantiqiy guruhlash). Har qanday dastur interfeysini ko'rib chiqing va foydalanuvchi interfeysini kichikroq mantiqiy qismlarga ajratishni boshlang. Ushbu UI bo'limlarining har biri (guruhlar) potentsial tarkibiy qismdir.

Daraxtlar, filiallar va kichik tarmoqlar: UIning to'liq / to'liq ko'rinishi (daraxt yoki magistral) mantiqiy qismlarga bo'linadi (aka filiallari). Daraxt boshlang'ich tarkibiy qismga (sxemaning tarkibiy qismiga) aylanadi va keyin UI (aka filiali) ning har bir bo'lagi qo'shimcha qismlarga bo'linadi (aka pastki filiallari). Bu UI tartibini saqlab turadi va ma'lumot va holat o'zgarishini daraxtdan novdalarga, so'ngra pastki filiallarga mantiqiy ravishda o'tkazishga imkon beradi.

Muvaffaqiyatli UI guruhlarini yarating (daraxtlar): Daraxtlar, filiallar, filiallar!

3. Komponentlar - funktsional va sinfga asoslangan:

Ikki turdagi tarkibiy qismlar mavjud: funktsional va sinfga asoslangan.

Funktsional komponent bilan qachon borishim kerak? Funktsional komponent bilan o'ting, agar sizning tarkibiy qismingiz rekvizitlarni namoyish qilishdan ko'proq narsani bajarmasa. Funktsional tarkibiy qismlarni sof funktsiyalar deb o'ylang: ular har doim bir xil rekvizitlarni hisobga olgan holda bir xil yo'l tutishadi va xuddi shunday harakat qilishadi. Shuningdek, ular hayot aylanish usullari haqida qayg'urmaydilar; ular fuqaroligi bo'lmagan tarkibiy qismlar.

Funktsional komponent, misol.

Sinfga asoslangan komponent bilan qachon borishim kerak? Agar sizning tarkibiy qismingizga ichki holat va tarkibiy qismlarning hayot tsikli usullari kerak bo'lsa, u holda sinfga asoslangan komponentga o'ting. "Ichki holat" va "hayot aylanishi usullari" haqida ko'proq ma'lumot olish uchun buni tekshiring.

Sinfga asoslangan komponent, misol.

4. Tayyorliklar! Sizga ko'rsatmalar! Menga xushomad! Yo'q, biz React Props haqida gapirayapmiz!

“Aslida, komponentlar JavaScript funktsiyalariga o'xshaydi. Ular o'zboshimchalik bilan kiritilgan ma'lumotlarni qabul qiladilar ("rekvizitlar" deb nomlanadi) va ekranda nimalar paydo bo'lishini tasvirlaydigan reaktsiya elementlarini qaytaradilar. "Manba" ni bosing.

Tuyalarga olib keling! Yo'q, siz o'sha tuyalarni shirinlikda qoldirishingiz mumkin. Biz bu erda camelCase haqida gaplashmoqdamiz. Har doim propel nomlari uchun camelCase-dan foydalaning. Proplarni shuningdek, atributlar sifatida ko'rib chiqish mumkin va React tomonidan o'rnatiladigan konventsiya - bu JSX atributlari uchun camelCase-dan foydalanish.

Har doim propel nomlari uchun camelCase-dan foydalaning.

Ishoning, rost, qasam ichaman! Parchaning qiymati aniq bo'lsa, uni qoldiring. Agar biz qo'zg'atuvchiga haqiqiy qiymatni belgilamasak ham, u haqiqiy qiymat hisoblanadi, shuning uchun "haqiqiy" belgisini qiymat sifatida belgilashning hojati yo'q.

Parchaning qiymati aniq bo'lsa, uni qoldiring.

Massiv indeksini kalit prop sifatida ishlatishdan saqlaning; uning o'rniga noyob identifikatorni ishlating: Biz juda ko'p ishlab chiquvchilar ro'yxat tuzishda element indeksidan uning kaliti sifatida foydalanishganiga guvoh bo'ldik, bu yaxshi emas! Bu noto'g'ri yozgan narsalar ...

BU NIMA O'ZINGIZNING MISOLI *** EMAS *** YO'Q!

Kalit bu DOM elementlarini aniqlash uchun reaktsiyadan foydalanadigan yagona narsa. Shunday qilib, agar siz biron bir narsani ro'yxatga kiritsangiz yoki o'rtadan biron narsani olib tashlasangiz nima bo'ladi? Agar kalit avvalgisi bilan bir xil bo'lsa, React DOM elementi bir xil tarkibiy qismlar to'plamini (avvalgidek) ifodalaydi deb taxmin qiladi. Ammo bu shunday emas!

Shuning uchun siz noyob identifikatordan foydalanishingiz kerak. Har bir element doimiy va noyob mulkka (ID) ega bo'lishi kerak. Va ideal holda unga (ID) mahsulot yaratilganda tayinlash kerak. Shunday yozilgan ...

BU NIMANING MISOLI *** BERIShINGIZ KERAK ***!

Har doim kerak bo'lmagan rekvizitlar uchun aniq defaultProplarni aniqlang. DefaultProps-ni taqdim etish sizning kodingizni o'quvchi narsalarni qabul qilishi shart emasligini anglatadi, chunki ular tarkibiy qismlarni ko'rsatish paytida defaultProps-ga qarash orqali shunchaki standart qiymatni bilishadi.

Yomon vs Yaxshi misol re: defaultProplarni aniqlash.

Ko'rib turganingizdek, ko'rib chiqish jarayonida sizning Reaktiv kodingizni nisbatan xatolikka yo'l qo'ymaydigan kichik, ammo juda muhim narsalar mavjud. Ushbu eng yaxshi amaliyotlarni o'rganish va ulardan foydalanish uchun vaqt sarflash, sizning xatolaringizni tuzatish uchun kodni qayta yozishga kamroq vaqt sarflashingizni anglatadi va sizga o'zingiz yoqtirgan narsalarni bajarishga ko'proq vaqt beradi. Agar o'zingiz yoqtirgan ishlarni bajarish kod yozish degani bo'lsa, boshqa loyihaga kod yozish uchun ko'proq vaqtingiz bo'ladi!

PRDXN's React eng yaxshi amaliyotlarini Github-da topishingiz mumkin: https://github.com/prdxn/React-JS-Checklist. Iltimos, ushbu ro'yxatga qo'shilish va hissa qo'shish uchun o'zingizni bepul his eting. Agar kirishga oid biron bir muammo bo'lsa, bu erdagi izohlarda bizni urib qo'ying.

Mijoz sifatida yoki xodim sifatida PRDXN bilan ishlashni xohlaysizmi? Keyin bizni ur! Qo'shimcha ma'lumotlar, shu jumladan aloqa uchun ma'lumot olish uchun bu yerga tashrif buyuring www.prdxn.com.