Konteksti në React

Para se të kalojmë në studimin e hukut të ardhshëm, duhet të shqyrtojmë konceptin e kontekstit në React.

Zakonisht ne kemi kaluar të dhëna nga komponentët prindër te komponentët fëmijë duke përdorur props. Kjo metodë është e mirë nëse keni pak komponentë dhe nuk keni nevojë të kaloni props nga prindi te komponenti i dëshiruar përmes komponentëve fëmijë më shumë se 2-3 herë.

Kjo metodë gjithashtu mund të bëhet jashtëzakonisht e papërshtatshme dhe të çojë në probleme të ndryshme, nëse në komponentët e ndërmjetëm këto props nuk përdoren fare (një problem i tillë quhet prop drilling), ose nëse duhet të kaloni të njëjtat të dhëna në një numër të madh komponentësh.

Në këto raste, konteksti mund të na ndihmojë, i cili lejon që të dhënat e komponentit prind të bëhen të disponueshme për çdo komponent fëmijë, pavarësisht nga vendndodhja e tij në pemën e komponentëve, pa i kaluar ato përmes props. Prandaj, të dhënat do të pranohen vetëm nga ata komponentë që kanë nevojë për to.

Për të përdorur kontekstin, ai duhet të krijohet. Së pari, le të krijojmë skedarin MyContext.js dhe të importojmë në të funksionin createContext:

Tani le të krijojmë objektin e kontekstit, ta shkruajmë atë në variablin MyContext, të cilin nuk duhet ta harrojmë të eksportojmë. Në rastin tonë, ne kemi vendosur në createContext vlerën fillestare null, pasq ajo nuk është thelbësore për ne (mund të kishte mbetur thjesht kllapa boshe). Vlera e paracaktuar do të shfaqet gjatë leximit të kontekstit, nëse nuk gjenden vlera të tjera. Kjo vlerë mund të jetë e çdo lloji:

Në mësimin e ardhshëm do të krijojmë një aplikacion nga disa komponentë, të vendosur në skedarë të veçantë. Nëse të gjithë komponentët ishin në një skedar, atëherë për të krijuar kontekstin ne nuk do të kishim bërë një skedar të veçantë dhe nuk do ta kishim eksportuar atë.

Tani le të importojmë MyContext.js në komponentin bosh App - në atë komponent nga i cili synojmë të transmetojmë të dhëna: