React Hooks: +Custom Hooks
Kamron FozilovAssalomu alaykum, React prolari va yangi o'rganuvchilar.
Bugun sizlar bilan React dunyosidagi inqilobiy o'zgarish - Hooks haqida suhbatlashamiz. Agar siz React bilan ishlayotgan bo'lsangiz yoki endigina o'rganishni boshlagan bo'lsangiz, Hooks haqida albatta eshitgansiz. Lekin ular nima, nima uchun kerak va qanday ishlaydi?
Keling, bularni oddiy va tushunarli tilda ko'rib chiqamiz.
React Hooks nima?
React Hooks - bu funksional komponentlarda holatni (state) va boshqa React xususiyatlarini ishlatishga imkon beruvchi maxsus funksiyalar. Bu imkoniyat Reactga 2018-yilda qo'shilgan va React dasturchilarining komponentlarni yaratish uslubini butunlay o'zgartirib yubordi.
Tasavvur qiling: siz oshxonangizni qayta jihozlamoqchisiz. Ilgari, barcha jihozlarni bir joyga qo'yish uchun katta, og'ir shkaflar kerak edi. Endi esa, Hooks yordamida, siz kichik, qulay ilgaklar (hooks) o'rnatib, har bir jihozni aynan kerakli joyga osib qo'yishingiz mumkin. Bu sizning oshxonangizni (ya'ni, komponentingizni) ancha tartibli va boshqarishni osonlashtiradi.
Keling, eng ko'p ishlatiladigan hooklarni ko'rib chiqamiz:
useState
useState - bu eng asosiy va ko'p ishlatiladigan Hook. U bizga funksional komponentlarda stateni saqlash va o'zgartirish imkonini beradi.
useEffect
Soddaroq qilib aytganda useEffect bizga komponent renderidan keyin bajariladigan kod yozish imkonini beradi (side effects). Bu juda foydali, ayniqsa ma'lumotlarni yuklash yoki tashqi resurslar bilan ishlash kerak bo'lganda.
useContext
useContext bizga component tree'ning chuqur qismlariga ma'lumot uzatish imkonini beradi. Ya'ni bu hook props yordamida har bir komponentga ma'lumot uzatish zaruratini yo'q qiladi va global holatni boshqarishni osonlashtiradi.
Xullas, React Hooklardan foydalanish kodimizni ancha sodda, toza va qayta foydalanish mumkin bo'lgan kodga aylantiradi.
Keling endi nisbatan murakkabroq qismga o'tamiz.
Mana bu kodga e'tibor bering:
Ushbu kod bizga foydalanuvchining tarmoqdagi holatini ko'rsatishimiz uchun kerak. Soddaroq qilib aytganda foydalanuvchi ilovada onlinemi yoki offline aniqlaymiz.
Endi sizga kichik savol. Ilovaning boshqa joyida ham mana shu network statusni chiqarmoqchi bo'lsangiz nima qilasiz?
CTRL + C va CTRL + V :)
Balki hayolingizga bu uchun alohida komponent hosil qilish ham kelgan bo'lishi mumkin. Lekin bu ham biz xohlayotgan yechim bo'lmaydi. Reactda built-in hooklar mavjud ekan. Lekin biz o'zimiz xuddi shu hooklar kabi custom hooklar yoza olamizmi?
-- Albatta.
Tepadagi masala uchun alohida useNetworkStatus hook yozsak, yechim ideal bo'ladi.
Va undan mana bunday ko'rinishda foydalanamiz:
E'tibor bering useNetworkStatus shunchaki use bilan boshlanadigan va ichida boshqa hookni ishlatayotgan oddiy funksiya. Bu custom hookning sodda ta'rifi.
Endi, ilovamizning istalgan joyida foydalanuvchining tarmoq holatini bilishimiz kerak bo'lsa, useNetworkStatus hookimizni ishlatishimiz mumkin.
Hooklar oldida use dan foydalanish majburiymi?
-- Yo'q, lekin foydalanishni maslahat beraman. Bu shuni anglatadiki, siz yozayotgan custom hook (funksiya) o'zining ichida Reactga tegishli bo'lgan hooklardan foydalanadi va use ishlatish orqali siz uning oddiy funksiyalardan farq qilishini belgilaysiz.
Endi eng asosiy savollardan biri, qachon custom hook yozish o'rinli?
Intuitsiyangizga tayaning. Shu paytgacha funksiyalarni qanday yozgansiz? Funksiyalar va ularni qachon yaratishda rivojlantirgan intuitsiyangizni to'g'ridan-to'g'ri hook yaratishga qo'llashingiz mumkin. Men odatda kodni ko'rgan paytimda tushunaman.
Agar bu juda mavhum bo'lsa, keyingi darslarda sizga ularni qachon yaratish kerakligi haqida bir nechta g'oyalar beraman. Buguncha esa shu yetarli :)