Reactдаги Контекст

Кейинги хукну ўрганишга ўтишдан олдин, биз Reactдаги контекст тушунчасини кўриб чиқишимиз зарур.

Одатда, биз родитель компонентлардан фарзанд компонентларга маълумотларни пропслар ёрдамида ўтказганмиз. Бу усул яхши, агар сизда озгина компонентлар бўлса ва сиз пропсларни родитель компонентдан сиз керак бўлган компонентга фарзанд компонентлар орқали 2-3 мартадан ортиқ ўтказмасангиз.

Бу усул, шунингдек, жуда ноқулай бўлиши мумкин ва турли хил муаммоларга олиб келиши мумкин, агар ўрта компонентларда бу пропслар умуман ишлатилмаса (бундай муаммо prop drilling деб аталади), ёки сиз бир хил маълумотларни кўпгина компонентларга ўтказмоқчи бўлсангиз.

Бундай ҳолларда бизга контекст ёрдам бериши мумкин, у родитель компонентнинг маълумотларини фарзанд компонентга унинг компонентлар дарахтидаги жойлашишидан қатиъй назар, пропслар орқали ўтказмасдан, дастлабки ҳолдада ёки қайта ишлаш имконияти билан етказиб бериш имкониятини беради. Мос равишда, маълумотларни фақат уларга ҳақиқатан ҳам kerak бўлган компонентлар қабул қилади.

Контекстдан фойдаланиш учун уни яратиш керак. Бошлаш учун, MyContext.js файлини яратамиз ва унга createContext функциясини импорт қиламиз:

import { createContext } from 'react';

Энди контекст объектини яратамиз, уни MyContext ўзгарувчисига ёзамиз, ун эса экспорт қилиниши керак. Бизнинг ҳолимизда, биз createContext га бошланғич қиймат null ни белгиладik, чунки биз учун у мухим эмас (бўш қовусни қолдириш хам мумкин эди). Белгиланган бошланғич қиймат контекстни ўқишда пайдо бўлади, агар бошқа қандайдир қийматлар топилмаса. Бу қиймат исталган турда бўлиши мумкин:

export const MyContext = createContext(null);

Кейинги дарсда биз алохида файлларда жойлашган бир нечта компонентлардан иборат иловани ярамиз. Агар барча компонентлар битта файлда бўлса, у ҳолда контекстни яратиш учун алохида файл очиш ва уни экспорт қилиш шарт эмас.

Келинг энди MyContext.js ни бўш App компонентига - биз маълумотларни ўтказмоқчи бўлган компонентга импорт қиламиз:

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

MyContext.js файлини яратинг ва уни дарсда тавсифилгандек, бўш App компонентига импорт қилинг.