16.3-reaktsiyada nima yangiliklar (.0-alfa)

16.3-alfa-reaktsiya npmjs-ga urildi va yuklab olinishi va loyihangizga qo'shilishi mumkin. Eng katta, eng qiziqarli o'zgarishlar qanday?

Yangilanish 05.02.2018 - Men oldin createContext xatti-harakati to'g'risida noto'g'ri noto'g'ri fikrlar bildirgan edim, ushbu bo'lim zavod funktsiyasining haqiqiy harakatlarini aks ettirish uchun yangilandi.

New context API

Kontekst API har doim sir bo'lib kelgan - bu rasmiy hujjatlashtirilgan React API, ammo shu bilan birga ishlab chiquvchilar uni ishlatmaslik haqida ogohlantirgan, chunki vaqt o'tishi bilan API o'zgarishi mumkin va ba'zi hujjatlarida yo'q bo'lgan. Xo'sh, endi bu vaqt keldi - RFC bosqichi o'tdi va yangi API birlashtirildi. Bu, shubhasiz, "foydalanuvchilarga qulay" va Redux yoki MobX-ning "ortiqcha xarajatlarisiz" oddiy davlat boshqaruvini talab qilganda hayotingizni biroz osonlashtirishi mumkin.

Yangi API React.createContext () sifatida mavjud va biz uchun ikkita komponentni yaratadi:

React.createContext orqali yangi kontekstni yaratish

Zavod funktsiyasini chaqirish bizga "Provayder" va "Iste'molchi" bo'lgan ob'ektni qaytarib beradi.

«Ta'minotchi» - bu sub-daraxtning barcha tarkibiy qismlariga ma'lumotlarni etkazib berishni maqsad qilgan maxsus komponent, shuning uchun ulardan bitta misol:

API yangi kontekstidan foydalanish - Context.Provider

Bu erda biz "mavzu" kontekstidan o'tishni istagan pastki daraxtni tanlaymiz (bu holda, butun daraxt) va biz o'tishni istagan qiymatni belgilaymiz. Albatta, qiymat dinamik bo'lishi mumkin (masalan, this.state asosida).

Keyingi qadam, Iste'molchidan foydalanish:

API yangi kontekstidan foydalanish - Context.Conumer

Agar siz "Iste'molchi" ni tegishli "Provayderga" kiritmasdan ko'rsatadigan bo'lsangiz, createContext chaqiruvida e'lon qilingan standart qiymat ishlatiladi.

Iltimos, ba'zi narsalarga e'tibor bering:

  • iste'molchi bir xil kontekst komponentiga kirish huquqiga ega bo'lishi kerak - agar siz kirish bilan bir xil parametrli yangi kontekstni yaratmoqchi bo'lsangiz, yangi kontekst yaratiladi va ma'lumotlar uzatilmaydi. Shuning uchun, iltimos, Kontekstning tarkibiy qismini ko'rib chiqing - u bir marta yaratilishi kerak va keyin kerak bo'lganda eksport qilinadi +
  • yangi sintaksis funktsiyadan bola sifatida foydalanadi (ba'zida render prop deb nomlanadi) - agar siz ushbu shakl bilan tanishmasangiz, unda ba'zi maqolalarni o'qishni maslahat beraman.
  • endi yangi Context API-dan foydalanmoqchi bo'lsangiz, kontekstroplarni ko'rsatish uchun prop-turlaridan foydalanish talab qilinmaydi.

Funktsiyaga o'tgan kontekstdan olingan ma'lumotlar Context.Provider komponentida provayder tomonidan o'rnatilgan qiymatga mos keladi va Provayderda ma'lumotlarning o'zgarishi barcha iste'molchilarni qayta ko'rsatilishiga olib keladi.

Hayot aylanishining yangi usullari

Alfa-versiya ichiga kiritish uchun boshqa RFC, hayotning ba'zi usullarini eskirishi va bitta (to'rt) yangi turini joriy etish bilan bog'liq.

Ushbu o'zgartirish eng yaxshi amaliyotlarni amalga oshirishga qaratilgan (nima uchun bu funktsiyalarni hayotiy tsikl usullari haqidagi maqolamda o'qib chiqishingiz mumkin), bu asinxron ishlash rejimida juda muhim bo'ladi (16-reaktsiya "Fiber" ning asosiy maqsadlaridan biri edi). ) to'liq faollashadi.

Eskirgan vaqt ichida ko'rib chiqiladigan funktsiyalar:

  • komponentWillMount - o'rniga komponentDidMount-dan foydalaning
  • komponentWillUpdate - buning o'rniga komponentDidUpdate-dan foydalaning
  • komponentWillReceiveProps - yangi funktsiya, statik getDerivedStateFromProps joriy etildi

Xavotir olmang, siz ushbu funktsiyalardan foydalana olmaysiz - 16.4-sonli eskirish xabarnomalari ajratilgan va ularni olib tashlash 17.0 da rejalashtirilgan

Hamma vahima. Dan vahima qilmaslikni aytadi. Ba'zi odamlar hali ham vahima.

Agar siz yangi StrictMode yoki AsyncMode-ga kirgan bo'lsangiz, eskirganlik to'g'risida xabarlarni faqat ushbu holatda ko'rishingiz mumkin, bunda siz ularni quyidagi usul bilan bostirishingiz mumkin:

  • UNSAFE_komponentWillMount
  • UNSAFE_komponentWillReceiveProps
  • UNSAFE_komponentWillUpdate

statik getDerivedStateFromProps

KomponentWillReceiveProps olib tashlanishi bilan biz rekvizitlarni o'zgartirish asosida shtatni yangilashning ba'zi vositalariga muhtojmiz - jamiyat buni hal qilish uchun yangi - statik usulni joriy etishga qaror qildi.

Statik usul nima? Statik usul bu uning misolida emas, balki sinfda mavjud bo'lgan usul / funktsiya. O'ylashning eng oson farqi shundaki, statik usul bunga kira olmaydi va uning oldida statik kalit so'z mavjud.

Ok, lekin agar funktsiya bunga kirish huquqiga ega bo'lmasa, buni qanday qilishimiz kerak.setState? Javob - biz emas. Buning o'rniga funktsiya yangilangan holat ma'lumotlarini qaytarishi kerak, yoki agar yangilanish kerak bo'lmasa, null:

Holatni yangilash uchun getDerivedStateFromProps-dan foydalanish

Qaytarilgan qiymat hozirgi setState qiymatiga o'xshaydi - faqat o'zgaradigan holatni qaytarishingiz kerak, qolgan barcha qiymatlar saqlanib qoladi.

Yodda tutish kerak bo'lgan narsalar:

Boshlashga undashni unutmang!

Siz hali ham tarkibiy qismning boshlang'ich holatini e'lon qilishingiz kerak (konstruktorda yoki sinf maydonida).

getDerivedStateFromProps komponentni dastlabki o'rnatish va qayta namoyish etishda ham chaqiriladi, shuning uchun siz uni konstruktordagi rekvizitlar asosida davlat yaratish o'rniga ishlatishingiz mumkin.

Xato, iltimos, faqat getDerivedStateFromProps-dan foydalaning

Agar siz ikkala getDerivedStateFromProps va komponentWillReceiveProps deb e'lon qilsangiz, faqat getDerivedStateFromProps chaqiriladi va siz konsolda ogohlantirishni ko'rasiz.

Odatda, siz holat yangilanganida ba'zi kod chaqirilishini tekshirish uchun qo'ng'iroqni qaytarib qo'ng'iroq qilish orqali foydalanasiz - bu holda komponentDidUpdate-dan foydalaning.

Agar siz statik kalit so'zni ishlatmaslikni xohlasangiz, alternativ sintaksisdan foydalanishingiz mumkin:

Statik ishlatmasdan getDerivedStateFromProps-ni e'lon qiling

StrictMode

Qat'iy rejim - bu sizning kodingiz eng yaxshi qoidalarga amal qilishiga ishonch hosil qilishning yangi usuli. Ushbu komponent React.StrictMode ostida mavjud va uni dastur daraxti yoki pastki qismiga qo'shish mumkin:

Agar StrictMode subtree-da taqdim etilgan bolalar tarkibiy qismlaridan biri oldingi paragraflarda aytilgan usuldan (masalan, komponentWillMount) foydalansa, brauzer konsolida dasturni tuzishda xato xabari paydo bo'ladi:

Xato: StrictMode pastki qismida xavfli hayot aylanishi

Hozirgi vaqtda xato xabari hayotiy tsikl usullarini olib tashlash uchun RFCga ishora qilmoqda.

AsyncMode

Hali faol bo'lmagan async komponent komponenti StrictMode bilan moslashtirildi va React.unstable_AsyncMode ostida mavjud. Undan foydalanish StrictMode ogohlantirishlarini ham faollashtiradi.

Agar siz asenkron tarkibiy qismlar haqida ko'proq bilmoqchi bo'lsangiz, quyidagi maqolalar / misollarni ko'rishingiz mumkin:

  • https://build-mbfootjxoo.now.sh/
  • https://github.com/koba04/react-fiber-resources

React Developer Tools-ning yangi versiyasi

Bundan tashqari, yangi tarkibiy qismlarni tuzatishni qo'llab-quvvatlash uchun Developer Tools-ning yangi versiyasi chiqdi.

Agar siz Chrome brauzeridan foydalanayotgan bo'lsangiz, biroz ko'proq kutishingiz kerak bo'ladi, chunki do'konda hali yangilanmagan va natijalarni debyut qilishga urinib ko'rishingiz mumkin ... qiziqarli natijalar:

Reaktsiya qiling. __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED hali ham yaxshi

Firefox foydalanuvchilari yangi xususiyatlardan allaqachon foydalana olishlari kerak:

Yangi AsyncComponent Firefox Developer Tools-da ko'rinadi

Ko'proq keladimi?

Shuni yodda tutingki, bu alfa versiyasi va barqaror 16.3da ko'proq yoki kamroq o'zgarishlar bo'lishi mumkin. Danning so'zlariga ko'ra, 16.3 "keyingi haftada" ozod qilinishi kerak:

Keyingi hafta o'tgan hafta - bu hafta.