Контекст дар React

Пеш аз он ки ба омӯзиши ҳуки навбатӣ гузарем, ба мо лозим аст, ки мафҳуми контекст дар React-ро баррасӣ кунем.

Одаттан мо маълумотро аз компонентҳои волидайн ба фарзандон бо ёрии пропсҳо мегузаронидем. Ин роҳ хуб аст, агар шумо андоз компонентҳо дошта бошед ва ба шумо лозим набошад, ки пропсҳоро аз волидайн то компоненти дилхоҳи шумо аз роҳи фарзандон зиёда аз 2-3 маротиба гузаронед.

Ин роҳ низ метавонад хеле норавон шавад ва ба мушкилотҳои гуногун бирасонад, агар дар компонентҳои миёна ин пропсҳо аслан истифода нашаван (инчунин мушкилот prop drilling номида мешавад), ё ба шумо лозим аст, ки якхела маълумотро ба миқдори зиёди компонентҳо бифиристед.

Дар ин ҳолатҳо ба мо метавонад контекст кӯмак расонад, ки имкон медиҳад, ки маълумоти компоненти волидайн барои ягон компоненти фарзанд дастрас шавад, ногаҳон ба ҷойгиршавии он дар дарахти компонентҳо, бе гузаронидани онҳо аз роҳи пропсҳо. Мувофиқан, маълумотро мегиранд фақат он компонентҳое, ки ба онҳо лозим аст.

Барои он ки аз контекст истифода барем, онро бояд эҷод кард. Аввалан, файли MyContext.js-ро эҷод мекунем ва функсияи createContext-ро ба он импорт мекунем:

import { createContext } from 'react';

Ҳоло объекти контекстро эҷод мекунем, онро ба тағирёбандаи MyContext менависем, ки онро фаромӯш намекунем, ки экспорт кунем. Дар ҳолати мо, мо дар createContext қимати ибтидоии null-ро таъин кардем, зеро ба мо он аҳаммият надорад (метавонст танҳо қавсҳои холӣ гузошт). Қимати таъиншуда бо супориши пешфарз ҳангоми хондани контекст пайдо мешавад, агар ягон дигар қимат ёфта нашавад. Ин қимат метавонад аз ягон навъ бошад:

export const MyContext = createContext(null);

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

Ҳоло биёед MyContext.js-ро ба компоненти холӣ App импорт кунем - ба он компонент, ки аз он мо ният дорем маълумотро бифиристем:

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

Файли MyContext.js-ро эҷод кунед ва онро ба компоненти холӣ App импорт кунед, тавре ки дар дарс тавсиф шудааст.