Reaktsiya kancalarini sezish

(Ushbu maqola DEV hamjamiyatida to'lov to'lovisiz mavjud.)

Bu hafta Sofi Alpert va men React Conf-da "Kancalar" taklifini taqdim etdik, keyin Rayan Florentsiyadan chuqur sho'ng'in qildik:

Men ushbu Hooks taklifi bilan hal qilmoqchi bo'lgan muammolarimizni ko'rish uchun ushbu ochilish ma'ruzasini tomosha qilishni maslahat beraman. Biroq, hatto bir soat ham katta vaqt sarflanadigan mablag ', shuning uchun men quyida joylashgan Kanca haqida bir nechta fikrlar bilan bo'lishishga qaror qildim.

Izoh: Ilgaklar - bu Reaktsiya qilish uchun eksperimental taklif. Siz hozir ular haqida bilishingiz shart emas. Shuni ham unutmangki, ushbu post mening shaxsiy fikrlarimni o'z ichiga oladi va React guruhining pozitsiyasini aks ettirmaydi.

Nega ilgaklar?

Biz bilamizki, tarkibiy qismlar va pastga tushadigan ma'lumotlar oqimi katta UIni kichik, mustaqil va qayta ishlatiladigan qismlarga ajratishga yordam beradi. Ammo biz ko'pincha murakkab tarkibiy qismlarni sindira olmaymiz, chunki mantiq yaxshi va biron bir funktsiyani yoki boshqa tarkibiy qismni ajratib bo'lmaydi. Ba'zida odamlar reaktsiya ularga "alohida tashvishlarga" yo'l qo'ymasliklarini anglatadi.

Ushbu holatlar juda keng tarqalgan bo'lib, animatsiyalar, shakllarni qayta ishlash, tashqi ma'lumotlar manbalariga ulanish va bizning tarkibiy qismlardan bajarishni istagan boshqa narsalarni o'z ichiga oladi. Ushbu foydalanish holatlarini faqat komponentlar bilan hal qilishga harakat qilganimizda, odatda quyidagilar bilan yakunlaymiz:

  • Qayta ishlab chiqarish va sinovdan o'tkazish qiyin bo'lgan katta komponentlar.
  • Turli xil tarkibiy qismlar va hayot aylanish usullari o'rtasida takrorlanadigan mantiq.
  • Rasmlar rekvizitlari va yuqori buyurtmali tarkibiy qismlar kabi murakkab naqshlar.

O'ylaymizki, kanca bu muammolarning barchasini hal qilishda eng yaxshi zarbamizdir. Kancalar tarkibiy qism ichidagi mantiqni qayta ishlatiladigan izolyatsiya qilingan birliklarga ajratishga imkon beradi:

Kancalar reaktsiyalar falsafasini (aniq ma'lumotlar oqimi va tarkibi) faqat tarkibiy qismlar o'rtasida emas, balki tarkibiy qism ichida qo'llaydilar. Shuning uchun men kancalar React komponentalari modeliga tabiiy mos keladi deb o'ylayman.

Rend rekvizitlari yoki yuqori darajadagi qismlarga o'xshash naqshlardan farqli o'laroq, kanca komponentlar daraxtiga keraksiz joylashishni kiritmaydi. Shuningdek, ular aralashmalarning kamchiliklaridan aziyat chekmaydilar.

Agar sizda visseral birinchi reaktsiya bo'lsa ham (men avvalgidek!), Men ushbu taklifni adolatli sinab ko'rishingizni va u bilan o'ynashingizni maslahat beraman. Menimcha sizga bu yoqadi.

Kancalar reaktsiyaga kirishadimi?

Kuklarni batafsil ko'rib chiqishdan oldin, siz kanca bilan reaktsiyaga yangi tushunchalar qo'shayotganimizdan xavotirda bo'lishingiz mumkin. Bu adolatli tanqid. O'ylaymanki, ularni o'rganish uchun qisqa muddatli kognitiv xarajatlar talab etilsa-da, natijasi buning aksi bo'ladi.

Agar React hamjamiyati Hooks taklifini qabul qilsa, bu React dasturlarini yozish paytida siz tushunishingiz kerak bo'lgan tushunchalar sonini kamaytiradi. Kancalar har doim funktsiyalar, sinflar, yuqori darajadagi tarkibiy qismlar va doimiy rekvizitlar o'rtasida doimiy ravishda almashtirishning o'rniga funktsiyalardan foydalanishga imkon beradi.

Amalga oshirish hajmi jihatidan Hooks qo'llab-quvvatlashi React-ni faqat ~ 1.5kB (min + gzip) ga oshiradi. Bu unchalik katta bo'lmasa ham, Hook-larni qabul qilish to'plam hajmini kamaytirishi mumkin, chunki Hooks-dan foydalanilgan kodlar sinflardan foydalangan holda ekvivalent kodlarga qaraganda yaxshiroq minimallashtirishga moyildir. Quyidagi misol biroz ekstremal, ammo u nima uchun samarali ekanligini ko'rsatadi (butun ipni ko'rish uchun bosing):

Hooks taklifida keskin o'zgarishlar yo'q. Yangi yozilgan tarkibiy qismlarda Hook-larni qabul qilgan bo'lsangiz ham, mavjud kodingiz ishlashda davom etadi. Aslida, biz aynan shuni tavsiya qilamiz - bironta katta yozuv yozmang! Har qanday muhim kodga ilgaklar qabul qilish bilan kutish yaxshi fikr. Agar siz Hooks taklifi bo'yicha fikr-mulohaza va har qanday xatolar haqida xabar berish uchun 16.7 alfa-tajribasini sinab ko'rsangiz, juda minnatdormiz.

Kancalar nima o'zi, aniqmi?

Kancalarni tushunish uchun biz orqaga qadam tashlab, kodni qayta ishlatish haqida o'ylashimiz kerak.

Bugungi kunda React ilovalarida mantiqni qayta ishlatishning ko'plab usullari mavjud. Biz oddiy funktsiyalarni yozib, ularni biror narsani hisoblash uchun chaqirishimiz mumkin. Biz tarkibiy qismlarni ham yozishimiz mumkin (ularning vazifalari yoki sinflari bo'lishi mumkin). Komponentlar yanada kuchliroq, ammo ular ba'zi interfeyslarni ko'rsatishi kerak. Bu ularni vizual bo'lmagan mantiqni almashish uchun noqulay qiladi. Shunday qilib, biz murakkab rekvizitlar va yuqori darajadagi qismlarga o'xshash murakkab naqshlarni tugatamiz. Ko'pchilik o'rniga kodni qayta ishlatishning bitta oddiy usuli mavjud bo'lsa, Reaksiya shunchaki sodda bo'lmaydimi?

Vazifalar kodni qayta ishlatish uchun mukammal mexanizmga o'xshaydi. Funktsiyalar o'rtasida mantiqiy harakatlanish eng kam harakat talab etadi. Biroq, funktsiyalar ularning ichida mahalliy reaktsiya holatiga ega bo'lolmaydi. Siz kodni o'zgartirmasdan yoki Kuzatiluvchi kabi mavhumlashtirmasdan turib, "ko'rish oynasining o'lchami va holatini yangilash" yoki "vaqt o'tishi bilan qiymatni jonlantirish" kabi xulq-atvorni ajratib bo'lmaydi. Ikkala yondashuv biz uchun React yoqadigan soddaligi buzadi.

Kancalar aynan shu muammoni hal qilishadi. Kancalar sizga bitta funksiya qo'ng'irog'ini amalga oshirish orqali funktsiyadan Reaktsiya funktsiyalaridan (masalan, holat) foydalanishga imkon beradi. React Reaktsiyaning "qurilish bloklari" ni ochib beradigan bir nechta o'rnatilgan kancalarni beradi: holat, hayot aylanishi va kontekst.

Kancalar oddiy JavaScript funktsiyalari bo'lganligi sababli, siz React tomonidan ta'minlangan o'rnatilgan kancalarni o'zingizning "maxsus kancalaringizga" birlashtirishingiz mumkin. Bu sizga murakkab muammolarni bitta chiziqqa aylantirish va ularni ilovangizda yoki React jamoatchiligi bilan bo'lishish imkonini beradi:

E'tibor bering, maxsus kancalar texnik jihatdan Reaktsiya xususiyati emas. O'zingizning ilgaklaringizni yozish imkoniyati tabiiy ravishda kancalar qanday yaratilishidan kelib chiqadi.

Menga ba'zi kodlarni ko'rsating!

Aytaylik, biz hozirgi oynaning kengligidagi tarkibiy qismga obuna bo'lmoqchimiz (masalan, tor tarkibda boshqa tarkibni namoyish qilish uchun).

Bugungi kunda ushbu turdagi kodni yozishning bir necha yo'li mavjud. Ular sinf yozishni, hayot aylanishining ba'zi usullarini o'rnatishni yoki agar siz komponentlar orasida qayta ishlatishni istasangiz, render rekvizitini yoki yuqori darajadagi buyurtmani olishni o'z ichiga oladi. Ammo menimcha, bu narsa hech narsaga yaramaydi:

https://gist.github.com/gaearon/cb5add26336003ed8c0004c4ba820eae

Agar siz ushbu kodni o'qigan bo'lsangiz, u aniq aytilgan narsani amalga oshiradi. Biz tarkibiy qismimizda deraza kengligidan foydalanamiz va agar u o'zgaradigan bo'lsa React bizning tarkibimizga qaytadan kiradi. Va kancalarning maqsadi - tarkibiy holatlar va yon ta'siri bo'lsa ham, komponentlarni haqiqatan deklarativ qilish.

Ushbu maxsus kanca qanday amalga oshirilishini ko'rib chiqamiz. Oynaning hozirgi kengligini saqlab qolish uchun biz React mahalliy holatidan foydalanamiz va deraza hajmi o'zgarganda bu holatni o'rnatish uchun yon ta'sirni ishlatamiz:

https://gist.github.com/gaearon/cb5add26336003ed8c0004c4ba820eae

Yuqorida ko'rib turganingizdek, UseState va useEffect kabi o'rnatilgan Reaktiv ilmoqlar asosiy qurilish bloklari bo'lib xizmat qiladi. Biz ularni tarkibiy qismlarimizdan to'g'ridan-to'g'ri ishlatishimiz mumkin yoki biz ularni UseWindowWidth kabi maxsus kancalarda birlashtirishimiz mumkin. Custom Hooks-dan foydalanish React-ning o'rnatilgan API-sidan foydalanish kabi o'zini idiotik deb biladi.

O'rnatilgan ilgaklar haqida ko'proq ma'lumot olishingiz mumkin.

Kancalar to'liq kapsulalangan - har safar Hook-ni chaqirganingizda, u hozirda bajarilayotgan komponentlar ichida mahalliy holatga tushib qoladi. Ushbu aniq misol uchun bu muhim emas (deraza kengligi barcha tarkibiy qismlar uchun bir xil!), Lekin kancalarni shunchalik kuchli qiladigan narsa. Ular davlatni baham ko'rishning usuli emas, balki mantiqiy mantiqni baham ko'rish usulidir. Yuqoridan pastga tushadigan ma'lumot oqimini buzishni xohlamaymiz!

Har bir kanca ba'zi mahalliy holat va yon ta'sirlarni o'z ichiga olishi mumkin. Odatda, funktsiyalar o'rtasida bajarganingiz kabi, siz bir nechta kancalar o'rtasida ma'lumotlarni uzatishingiz mumkin. Ular argumentlarni olishlari va qiymatlarni qaytarishlari mumkin, chunki ular JavaScript funktsiyalari.

Mana Reaktsiya animatsiyasining kutubxonasi kanca bilan tajriba qilishning namunasi:

Demo-manba kodida ajoyib animatsiya bir xil ko'rsatish funktsiyasida bir nechta maxsus kanca orqali qiymatlarni uzatish orqali qanday amalga oshirilayotganiga e'tibor bering.

https://codesandbox.io/s/ppxnl191zx

(Agar ushbu misol haqida ko'proq bilmoqchi bo'lsangiz, ushbu qo'llanmani ko'rib chiqing.)

Garchi bu Hooks-ning asosiy maqsadi bo'lmasa ham, ular kuchli interfaol disk raskadrovka vositalari uchun eshiklarni ochishadi:

Ilgaklar o'rtasida ma'lumotlarni uzatish qobiliyati ularni animatsiya, ma'lumotlarga obuna bo'lish, shakllarni boshqarish va boshqa davlat mavhumliklarini ifoda etish uchun juda yaxshi qiladi. Render rekvizitlari yoki yuqori darajadagi qismlardan farqli o'laroq, kancalar sizning daraxt daraxtingizda "yolg'on ierarxiya" yaratmaydi. Ular ko'proq komponentga biriktirilgan "xotira hujayralari" ning tekis ro'yxatiga o'xshaydi. Qo'shimcha qatlamlar yo'q.

Xo'sh, sinflar haqida nima deyish mumkin?

Custom Kancalar, bizning fikrimizcha, Hooks taklifining eng jozibali qismidir. Ammo maxsus Hook-lar ishlashi uchun React-ga holat va yon ta'sirlarni e'lon qilish uchun funktsiyalar kerak. Bu biz foydalanishState va useEffect kabi tuzilgan ilgaklar orqali amalga oshiramiz. Siz ular haqida hujjatlarda bilib olishingiz mumkin.

Aniqlanishicha, ushbu o'rnatilgan kancalar faqat maxsus kancalarni yaratish uchun foydalidir. Ular umuman tarkibiy qismlarni aniqlash uchun etarli, chunki ular bizga davlat kabi barcha zarur xususiyatlarni beradi. Shuning uchun biz kelajakda Reaktsiya tarkibiy qismlarini aniqlashning asosiy usuli bo'lishini iltimos qilamiz.

Bizda darslarni bekor qilish rejalari yo'q. Facebook-da bizda o'n minglab sinf komponentlari mavjud va siz kabi siz ularni qayta yozish niyatimiz yo'q. Ammo agar React hamjamiyati kancalarni o'z ichiga olsa, tarkibiy qismlarni yozish uchun tavsiya etilgan ikkita xil usul bo'lishi mantiqqa to'g'ri kelmaydi. Kancalar sinflar uchun foydalanishning barcha holatlarini qamrab olishi mumkin, shu bilan birga kodni olish, sinash va qayta ishlatishda ko'proq moslashuvchanlikni ta'minlaydi. Shu sababli Kuklar Reactning kelajagi haqidagi tasavvurimizni aks ettiradi.

Aren Magic emasmi?

Siz ilgaklar qoidalari bilan ajablangan bo'lishingiz mumkin.

Garchi kanca yuqori sathda chaqirilishi g'ayrioddiy bo'lsa-da, iloji bo'lsa ham, siz holatni aniqlashni xohlamasligingiz mumkin. Masalan, siz sinfni shartli ravishda belgilay olmaysiz va to'rt yil davomida React foydalanuvchilari bilan suhbatlashganda men bu haqida shikoyatni eshitmadim.

Ushbu dizayn qo'shimcha sintaktik shovqin yoki boshqa noaniqliklarsiz maxsus kancalarni yoqish uchun juda muhimdir. Biz boshlang'ich notanishlikni tan olamiz, ammo biz ushbu savdo-sotiq uning imkoniyatlariga mos keladi deb o'ylaymiz. Agar siz rozi bo'lmasangiz, men siz bilan amalda o'ynashni maslahat beraman va bu sizning fikringizni o'zgartiradimi yoki yo'qligini ko'ring.

Biz bir oy davomida ishlab chiqarishda ilgaklar ishlatdik va muhandislarning ushbu qoidalarga aralashib qolishlarini ko'rish uchun. Amaliyotda odamlar bir necha soat ichida ularga o'rganib qolishlarini aniqladik. Shaxsan, men ushbu qoidalar avvaliga o'zimni "yomon his qilganini" tan olaman, lekin tezda bu qoidadan xalos bo'ldim. Ushbu tajriba mening birinchi taassurotimni React bilan aks ettirdi. (Darhol munosabat bildirishni xohladingizmi? Ikkinchi urinishimga qadar ko'rmadim.)

E'tibor bering, kanca-larda ham "sehr" yo'q. Jeymi ta'kidlaganidek, bu juda o'xshash ko'rinadi:

https://gist.github.com/gaearon/62866046e396f4de9b4827eae861ff19

Har bir komponent uchun kancalar ro'yxatini saqlab turamiz va Hook ishlatilganda ro'yxatdagi keyingi elementga o'tamiz. Ilgaklar qoidalari tufayli, ularning tartibi har bir ko'rsatishda bir xil, shuning uchun biz har bir qo'ng'iroq uchun tarkibiy qismni to'g'ri holat bilan ta'minlay olamiz. Shuni unutmangki, reaktsiya qaysi komponentni ko'rsatishini bilish uchun maxsus biron bir narsa qilish kerak emas - React bu sizning komponentingizni chaqiradigan narsa.

(Rudi Yardlining ushbu maqolasida chiroyli vizual tushuntirish mavjud!)

Ehtimol, siz React kuklar holatini qayerda ushlab turishini bilmoqchisiz. Javob aniq Reak darslar uchun mo'ljallangan joyda saqlanadi. React tarkibiy qismlarini qanday aniqlamasligingizdan qat'iy nazar, har qanday holat uchun haqiqat manbai bo'lgan ichki yangilash navbati mavjud.

Ilgaklar zamonaviy JavaScript kutubxonalarida keng tarqalgan bo'lishi mumkin bo'lgan proksi-serverlarga yoki boshqa narsalarga ishonmaydi. Shunday qilib, tortishuvli kancalar shunga o'xshash muammolarga ba'zi mashhur yondashuvlarga qaraganda kamroq sehrli. Aytmoqchimanki, kancalar array.push va array.pop-ni chaqirish kabi sehrga ega (qo'ng'iroqni buyurtma qilish ham muhim!)

Ilgaklar dizayni React bilan bog'lanmagan. Aslida, taklif e'lon qilingan dastlabki bir necha kun ichida turli xil odamlar Vue, veb-komponentlar va hattoki oddiy JavaScript funktsiyalari uchun bir xil Hooks API-ni eksperimental ravishda amalga oshirishni taklif qilishdi.

Va nihoyat, agar siz dasturiy purist bo'lsangiz va amalga oshiriladigan tafsilot sifatida o'zgaruvchan holatga tayanib Reaktsiyadan xavotirda bo'lsangiz, ilgaklar bilan ishlash algebraik effektlardan foydalangan holda toza usulda amalga oshirilishi mumkin (agar JavaScript qo'llab-quvvatlangan bo'lsa). Va albatta React har doim ichki o'zgaruvchan holatga tayanadi - aniq, shuning uchun kerak emas.

Siz ko'proq pragmatik yoki dogmatik nuqtai nazardan tashvishlanayotganingizdan qat'i nazar (agar siz mutlaqo bo'lsangiz), umid qilamanki, hech bo'lmaganda ushbu asoslardan biri mantiqiy. Agar qiziqsangiz, Sebastyan (Hooks taklifining muallifi) ushbu va boshqa tashvishlarga RFCning sharhida javob bergan. Eng muhimi, menimcha, Hooks bizga kamroq kuch sarflagan holda tarkibiy qismlarni yaratishga va foydalanuvchi tajribasini yaxshiroq yaratishga imkon beradi. Va shuning uchun men shaxsan kuklardan hayajonlanaman.

Hype emas, balki sevgini tarqating

Agar ilgaklar hali ham sizga zo'r tuyulmasa, men buni to'liq tushuna olaman. Umid qilamanki, siz ularga kichik uy hayvonlari loyihasini sinab ko'rasiz va bu sizning fikringizni o'zgartiradimi, bilib olasiz. Agar siz kancalar hal qiladigan muammolarni boshdan kechirmagan bo'lsangiz yoki boshqa bir echimingiz bo'lsa, iltimos, bizga RFCda xabar bering!

Agar sizni hayajonga solgan bo'lsam yoki ozgina qiziqsangiz, bu juda yaxshi! Menda so'rash uchun birgina iltifot bor. Hozirda reaktsiyani o'rganayotgan ko'plab odamlar bor va agar biz darsliklarni yozishga shoshilmasak va bir necha kundan beri mavjud bo'lmagan xususiyat uchun eng yaxshi amaliyotlarni e'lon qilsak, ular adashib qolishadi. Ilgaklar haqida ba'zi narsalar hattoki bizga React guruhida ham aniq emas.

Agar siz ilgaklar ishlamaydigan holatda ilgaklar haqida biron bir tarkib yaratsangiz, iltimos, bu eksperimental taklif ekanligini va rasmiy hujjatlarga havolani qo'shing. Biz taklifga kiritilgan har qanday o'zgartirishlar bilan uni yangilab turamiz. Biz uni keng qamrovli qilish uchun ko'p kuch sarfladik, shu sababli ko'p savollarga allaqachon javob berilgan.

Siz kabi hayajonlanmaydigan boshqa odamlar bilan suhbatlashganda iltimos, iltifotli bo'ling. Agar siz noto'g'ri tushunishni ko'rsangiz, boshqa odam unga ochiq bo'lsa, qo'shimcha ma'lumot bilan bo'lishishingiz mumkin. Ammo har qanday o'zgarish qo'rqinchli, va biz jamoat sifatida odamlarga begonalashtirish o'rniga ularga yordam berishga harakat qilishimiz kerak. Agar men (yoki React guruhidagi biron bir kishi) ushbu maslahatga rioya qilmasa, iltimos, bizni chaqiring!

Keyingi qadamlar

Bu haqda ko'proq bilish uchun Hooks taklifiga oid hujjatlarni ko'rib chiqing:

  • Kancalar bilan tanishtirish (motivatsiya)
  • Bir qarashda ilgaklar (aylanma yo'l)
  • O'zingizning ilgaklaringizni yaratish (bu juda qiziqarli)
  • Savollarga ilmoq (savolingizga shu erda javob berilgan bo'lishi mumkin!)

Kancalar hali erta, ammo barchangizning fikr-mulohazalaringizni eshitishdan xursandmiz. Siz uni RFC-ga yo'naltirishingiz mumkin, ammo biz Twitter-dagi suhbatlardan xabardor bo'lish uchun ham qo'limizdan kelganini qilamiz.

Iltimos, menga biron bir narsa aniq bo'lmasa, menga xabar bering va men sizning muammolaringiz haqida suhbatlashishdan xursand bo'laman. O'qiganingiz uchun tashakkur!

Vitra - Portemanteau barchasini osib qo'ying