Reactda Kontekst

Keyingi hookni o‘rganishga o‘tishdan oldin, Reactdagi kontekst tushunchasini ko‘rib chiqishimiz zarur.

Odatda, biz ma'lumotlarni ota-komponentlardan bola komponentlarga proplar yordamida uzatardik. Ushbu usul yaxshi, agar sizda kam sonli komponentlar bo‘lsa va siz proplarni ota komponentdan kerakli komponentingizga bolalar orqali 2-3 marta uzatishingiz shart bo‘lmasa.

Ushbu usul, shuningdek, juda noqulay bo‘lib qolishi va turli muammolarga olib kelishi mumkin, agar oraliq komponentlarda bu proplar umuman ishlatilmasa (bunday muammo prop drilling deb ataladi), yoki siz bir xil ma'lumotlarni ko‘p sonli komponentlarga uzatishingiz kerak bo‘lsa.

Bunday hollarda bizga kontekst yordam beradi, bu ota komponent ma'lumotlarini uning bolasi uchun, komponentlar daraxtidagi joylashuvidan qat'iy nazar, proplar orqali uzatmasdan ham foydalanish imkonini beradi. Shunga ko‘ra, ma'lumotlarni faqat ularga kerak bo‘lgan komponentlar qabul qiladi.

Kontekstdan foydalanish uchun, uni yaratish kerak. Boshlash uchun, MyContext.js faylini yaratamiz va unga createContext funksiyasini import qilamiz:

import { createContext } from 'react';

Endi kontekst obyektini yaratamiz, uni MyContext o‘zgaruvchisiga yozamiz, uni eksport qilishni unutmaslik kerak. Bizning holatda, biz createContext ga boshlang‘ich qiymat sifatida null ni o‘rnatdik, chunki bu biz uchun muhim emas (shunchaki bo‘sh qavslarni qoldirish ham mumkin edi). Belgilangan standart qiymat kontekst o‘qilayotganda paydo bo‘ladi, agar boshqa qiymatlar topilmasa. Ushbu qiymat istalgan turda bo‘lishi mumkin:

export const MyContext = createContext(null);

Keyingi darsda biz alohida fayllarda joylashgan bir nechta komponentlardan iborat ilova yaratamiz. Agar barcha komponentlar bitta faylda bo‘lsa, kontekst yaratish uchun alohida fayl yaratmasdik ham va uni eksport qilmasdik ham.

Keling, endi MyContext.js ni bo‘sh App komponentiga import qilaylik - ma'lumotlarni uzatmoqchi bo‘lgan komponentimizga:

import { MyContext } from './MyContext.js';

MyContext.js faylini yarating va uni bo‘sh App komponentiga import qiling, dersda tavsiflanganidek.