კონტექსტი 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, როგორც აღწერილია გაკვეთილზე.