Eng yaxshi amaliyotlar va foydali funktsiyalarga amal qiling

So'nggi paytlarda React bitta sahifa ilovasidan tortib mobil ilovalarga qadar hamma narsani yaratishda dasturchilar tomonidan qo'llaniladigan yangi vositaga aylandi. Ammo men reaktsiyaga chuqurroq kirishni boshlaganimdan beri juda yaxshi rivojlangan "salqin" tugun modullarini ko'rdim. Ular hech qanday qoidalarga rioya qilmaydilar, tarkibiy qismlar juda katta. Ular davlatdan juda ko'p narsa uchun foydalanadilar va ular soqov tarkibiy qismlardan foydalanmaydi. Etarlicha tajribaga ega bo'lgan har bir kishi, agar har safar har bir tarkibiy qismni har safar taqdim qilsangiz, bu qancha muammoni hal qilish va brauzerga qancha yuk tushishini tushunadi. Ushbu maqolada men sizga React-ning eng yaxshi usullari, React-ni qanday sozlash va uni qanday qilib juda tez amalga oshirish haqida so'zlab beraman.

Iltimos, yangi amaliyot paydo bo'lishi bilan men ushbu maqolani yangilab turishni unutmayman.

O'qishni boshlashdan oldin, React bu dasturiy (FP) kutubxona ekanligini unutmang. Agar FP nima ekanligini bilmasangiz, iltimos Stack Exchange javobini o'qing.

ES6 dan foydalaning (Babel bilan tarjima qilingan)

ES6 sizning hayotingizni ancha osonlashtiradi. Bu JSni zamonaviy va zamonaviyroq qiladi. ES6 bilan bitta ajoyib misol - Generatorlar va va'dalar. Asinxron qo'ng'iroqni amalga oshirish uchun bir vaqtning o'zida o'rnatilgan qo'ng'iroqlar qilish kerak bo'lgan paytni eslang. Xullas, men ham siz bilan sinxronlashtirilgan asenkron JSni kutib olishdan mamnunman (ha, bu juda zo'r). Bunga bitta ajoyib misol generatorlar:

Qayerda:

Bunga kiradi:

Veb-paketdan foydalaning

Webpack-dan foydalanish to'g'risida qaror juda oddiy: issiq qayta yuklash, miniblangan fayllar, tugun modullari :) va siz ilovalaringizni kichik qismlarga ajratishingiz va ularni dangasa yuklashingiz mumkin.

Agar siz keng miqyosli applikatsiya qurmoqchi bo'lsangiz, dangasa yuk qanday ishlashini tushunish uchun ushbu maqolani o'qishni tavsiya etaman.

JSX-dan foydalaning

Agar veb-rivojlanish fonidan kelib chiqsangiz, JSX juda tabiiy his qiladi. Ammo agar sizning veb-muhitingiz rivojlanmagan bo'lsa, ko'p tashvishlanmang, JSX-ni o'rganish juda oson. E'tibor bering, agar siz JSX-dan foydalanmasangiz, dasturni saqlash qiyinroq bo'ladi.

Har doim to'plamingiz hajmiga qarab turing

O'zingizning to'plamingizni kichikroq qilish uchun bitta maslahat to'g'ridan-to'g'ri tugun modulining ildiz yo'lidan import qilishdir.

Buni bajaring:

"Fu / Foo" dan "Foo" faylini import qilish

ning o'rniga:

{Foo} ni "foo" dan import qilish

Qismlaringizni kichikroq tuting (juda kichik)

Bosh barmog'ingizning qoidasi shundaki, agar sizning tasvirlash usulingiz 10 tadan ko'p satrga ega bo'lsa, ehtimol juda katta. React-dan foydalanishning butun g'oyasi - kodni qayta ishlatish mumkinligi, shuning uchun agar siz hamma narsani bitta faylga tashlasangiz, siz React go'zalligini yo'qotasiz.

O'z tarkibiy qismiga ega bo'lish uchun nima kerak?

Reaktsiya haqida o'ylashda kodni qayta ishlatish va kod tuzilishi haqida o'ylashingiz kerak. Siz faqat bitta satr kodiga ega oddiy kirish elementi uchun komponent yaratolmaysiz. Komponent bu foydalanuvchi tomonidan qabul qilinadigan "HTML" elementlarining aralashmasidir. Bilaman, bu biroz g'alati tuyuladi, ammo misolni ko'rishga imkon beradi. Kirish ekranini ko'rib chiqing:

Uning orqasida qanday tuzilma mavjud. Sizda ikkita tugma va havoladan iborat shakl mavjud. Buni kodda ko'rishga ruxsat bering:

Bu erda nima noto'g'ri? Takrorlash. Kirishlar bir xil tuzilishga ega, shuning uchun uni tarkibiy qismga aylantirmaslik kerak.

Endi bu juda chiroyli. Men bu erda juda ko'p tafsilotlarni bilmayman, lekin agar siz o'qishni davom ettirmoqchi bo'lsangiz, Thinking React-ga o'ting.

Davlat haqida nima deyish mumkin?

React-dagi eng yaxshi amaliyot bu sizning davlatingizni minimallashtirishdir. Shuni yodda tutish kerak bo'lgan narsa, bola va ota-ona o'rtasidagi holatni sinxronlashdan saqlanishdir. Yuqoridagi misolda biz ushbu shaklga egamiz, bu holat ko'rinishdagi rekvizit sifatida tushiriladi va har safar foydalanuvchi parol va foydalanuvchi nomini yangilashi ko'rinishda yangilanadi, ammo bu shakl emas.

Ish faoliyatini optimallashtirish uchun ShouldComponentUpdate-dan foydalaning

Reaktsiya - har doim TIME yoki uning tarkibiy qismlarining holatini o'zgartiradigan shablonli til. Shunday qilib, har safar xar safar sahifani xarakat qilish kerakligini tasavvur qiling. Brauzerga katta yuk tushadi. Reaktsiya ko'rinishi paydo bo'lganda, agardaComponentUpdate noto'g'ri / rost bo'lsa, uni tekshiradi. Shunday qilib, sizda statik tarkibiy qism mavjud bo'lganda, o'zingizga yoqing va yolg'onni qaytaring. Yoki agar propus / holat o'zgarganligini tekshirish uchun statik tekshiruv bo'lmasa.

Agar siz ishlashni optimallashtirish haqida ko'proq ma'lumot olishni istasangiz, React Perf saytidagi maqolamni o'qing

O'zgarmaydiganlik haqida o'ylang

Agar siz Skaladan yoki boshqa yuqori unumdorlik tillaridan kelgan bo'lsangiz, bu sizni haqiqatan ham yaxshi tushunadigan tushunchadir. Ammo, agar siz kontseptsiya bilan tanishmasangiz, egizaklar kabi o'zgarmaslikni o'ylab ko'ring. Ular juda o'xshash va ular bir-biriga o'xshaydi, lekin ular teng emas. Masalan:

Nima bo'ldi endi? Object2 1-bandga murojaat sifatida yaratilgan, ya'ni ob'yekt2 so'zining har qanday ma'nosida ob'ektga murojaat qilishning yana bir usuli mavjud. Object3-ni yaratganimda ob'ekt1 bilan bir xil tuzilishga ega bo'lgan yangi ob'ekt yaratdim. Object.assign funktsiyasi yangi ob'ektni oladi va keyin ob'ekt1 tarkibini klonlashtiradi, shu sababli yangi ob'ektni yaratib, ob'ektni1 ob'ektiga solishtirganda ular bir-biridan farq qiladi. Nega bu muhim? Ish faoliyatini optimallashtirish haqida o'ylang, men yuqorida aytib o'tdim, React har doim tarkibiy holat o'zgarganda. Agar barcha atributlar bir-biridan farq qilishini tekshirish uchun chuqur tekshiruvni amalga oshirishning o'rniga ShouldComponentUpdate funktsiyasidan foydalansangiz, ob'ektlarni taqqoslashingiz mumkin. Ko'proq bilishni istasangiz, ushbu maqolani o'qing.

Aqlli va soqov tarkibiy qismlaridan foydalaning

Bu erda har bir narsada holat bo'lishi shart emas. Ideal holda siz ota-onalarning aqlli ko'rinishiga ega bo'lasiz va barcha bolalar soqov tarkibiy qismlaridan bo'lib, ular shunchaki rekvizitlarni oladi va unda mantiq yo'q. Siz shunday bir narsa qilish orqali soqov komponentni yaratishingiz mumkin:

Soqov tarkibiy qismlarini disk raskadrovka qilish osonroq, chunki u React haqida bo'lgan yuqoridan pastga metodologiyani qo'llaydi.

PropTypes-dan foydalaning

PropTypes komponentlarning ma'lumotlarini tekshirishni o'rnatishga yordam beradi. Bu disk raskadrovka paytida va bir nechta dasturchilar bilan ishlashda juda foydali. Katta jamoa bilan ishlaydigan har bir kishi ushbu maqolani o'qishi kerak.

Har doim funktsiyalarni konstruktor usulida bog'lang

Shtatni ishlatadigan komponentlar bilan ishlashda konstruktor usulida komponentlarni bog'lashga harakat qiling. Shuni yodda tutingki, hozir ES7-dan foydalanishingiz mumkin va shu kabi narsalarni ishlatib, vazifalarni bir-biriga bog'lab qo'yishingiz mumkin (konstruktorga bog'lash o'rniga):

someFunction = () => {
}

Redux / Flux-dan foydalaning

Ma'lumotlar bilan ishlashda siz Flux yoki Redux-dan foydalanishni xohlaysiz. Flux / Redux sizga ma'lumotlarni osonlikcha boshqarishga imkon beradi va og'riqni oldingi kesh bilan ishlashdan uzoqlashtiradi. Men shaxsan Redux-dan foydalanaman, chunki bu sizni ko'proq boshqariladigan fayl tuzilmasiga ega bo'lishga majbur qiladi.

Shuni yodda tutingki, ba'zida Redux / Flux-dan foydalanish juda foydali, ammo sizning dasturingizning butun holatini bitta oddiy ob'ektda saqlashingiz shart emas. Bu haqda ko'proq ma'lumotni bu erda o'qing.

Normalizrdan foydalaning

Endi biz ma'lumotlar haqida gaplashayotganimizda, men bir lahzani olib, sizni murakkab ma'lumotlar tuzilmalari bilan ishlashning muqaddas rejasi bilan tanishtirmoqchiman. Normalizr sizning jest ob'ektlaringizni osongina o'zgartirishingiz mumkin bo'lgan oddiy tuzilmalarga kiritadi.

Fayl tuzilishi

Men bu erda aniq bir bayonot bilan chiqmoqchiman va shuni aytmoqchimanki, men React / Redux bilan faqat ikkita fayl tuzilishini ko'rdim, bu bilan ishlashni osonlashtiradi.

Birinchi tarkib:

Ikkinchi tarkib:

Konteynerlardan foydalaning (Uzilgan - 2017 Keyingi bobni yangilang)

Ma'lumotni uzatadigan konteynerlardan foydalanishni xohlashingizning sababi, Flux / Redux bilan ishlashda har qanday ko'rinishni do'konga ulashdan qochishingizni anglatadi. Buning eng yaxshi usuli - ikkita idish yaratish. Xavfsiz ko'rinishni (haqiqiylikni tekshirishga muhtoj bo'lgan) va xavfli ko'rinishni o'z ichiga olgan. Ota-onalar uchun idishni yaratishning eng yaxshi usuli - bu bolalarni klonlash va kerakli rekvizitlarni topshirish.

Masalan:

Konteynerlar o'rniga shablonlarni ishlating

Konteyner bilan ishlashda va rekvizitni ko'rinishga qarab klonlashda men buni yanada samarali usulini topdim. Hozirgi kunda men taklif qiladigan usul bu konteynerlardan foydalanishning o'rniga, AuthenticatedTemplate va NotAuthenticatedBaseTemplate tomonidan kengaytiriladigan BaseTemplate-ni yaratishdir. Ikkita shablonda siz barcha funktsional imkoniyatlarni va barcha tasdiqlanmagan / tasdiqlangan ko'rinishlar bo'yicha baham ko'rilgan holatni qo'shasiz. Ko'rishlarda React.Componentni kengaytirish o'rniga siz shablonni kengaytirasiz. Shu tarzda siz biron bir ob'ektni klonlashtirishdan saqlanasiz va tarkibiy qism daraxtini tushiradigan rekvizitlarni filtrlashingiz mumkin.

Reflardan saqlaning

Taklif faqat sizning kodingizni saqlashni qiyinlashtiradi. Bundan tashqari, agar siz radlardan foydalansangiz, siz to'g'ridan-to'g'ri virtual domeni boshqarasiz. Bu shuni anglatadiki, komponent butun Dom daraxtini qayta ko'rsatishi kerak.

Prop tekshiruvidan foydalaning

PropTypes katta jamoa bilan ishlashda sizning hayotingizni yaxshilaydi. Ular sizga ko'rinadigan tarkibiy qismlarni tuzatishga imkon beradi. Ular, shuningdek, nosozliklarni tuzatishni ancha osonlashtiradi. Shu tarzda siz ma'lum bir komponent uchun standart talablarni qo'yasiz.

Boshqa sharhlar

Shuni ta'kidlashni istardimki, siz barcha tarkibiy qismlarni alohida fayllarga bo'lishingiz kerak.

Routerdan foydalaning: Bu erda siz bitta sahifali ilova yaratmoqchi bo'lsangiz, yo'riqnoma kerak bo'ladi, bundan boshqa gap yo'q. Men shaxsan React Router-dan foydalanaman.

Agar siz oqimni ishlatayotgan bo'lsangiz, do'konni o'zgartirish voqealarini tinglashni taqiqlashni unutmang. Siz xotira etishmasligini yaratishni xohlamaysiz.

Agar siz ilovangiz nomini dinamik ravishda o'zgartirishni xohlasangiz, siz quyidagicha qilishingiz mumkin:

Ushbu repo React / Redux autentifikatsiyasining ajoyib namunasidir.

2017 yilda yangi narsalar

Katta qayta yozishga tayyorlaning. Reaktsiya yaratuvchilari endi reaktsiyalar yadrosini tiklaydilar. Bu yanada yaxshi ishlashga, yaxshi animatsiyalarga va katta ilovalarni yaratishda foydalanishingiz mumkin bo'lgan ko'proq API-ga ega. Siz bu erda ko'proq o'qishingiz mumkin.

Foydali yordamchi funktsiyalari

Quyidagi funktsiya Ob'ektlarni taqqoslash funktsiyasidir. Foydalanish: holat yoki propusning mustComponentUpdate-da o'zgarganligini tekshiring

Dinamik ravishda reduktor yarating

Foydalanish:

Konstantalarni yaratish:

Quyidagi hollarda taqdim etish:

Foydalanish: agar biror narsa bo'lsa, tarkibiy qismni namoyish qiling

Davlat qiymatini dinamik ravishda o'zgartirish:

Mening veb-sahifam.config.js

React High Performance dasturlari haqida o'qishni davom ettiring.

Agar siz ushbu maqolani yoqtirgan bo'lsangiz, boshqalar uni yoqtirishlari uchun yashil rangdagi pastga bosing. Shuningdek, o'zingiz biladigan foydali amaliyotlar yoki foydali funktsiyalar bilan savol bering yoki eslatma qoldiring.

Tvitterda @nesbtesh-da kuzatib boring