Կոնտեքստ 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 կոմպոնենտի մեջ, ինչպես նկարագրված է դասում: