Muktadha katika React

Kabla ya kuendelea na usomaji wa hook inayofuata, inatubidi tuchunguze dhana ya muktadha katika React.

Kawaida tulihamisha data kutoka kwa vilengwa vya mzazi hadi vya watoto kwa kutumia props. Njia hii ni nzuri ikiwa una vilengwa vichache na hauitaji kupitisha props kutoka kwa mzazi hadi kwa lengwa unalolitaka kupitia vilengwa vya watoto zaidi ya 2-3 mara.

Njia hii pia inaweza kuwa isiyofaa kabisa na kusababisha matatizo mbalimbali, ikiwa katika vilengwa vya kati hizi props hazitumiki kabisa (tatizo kama hilo linaitwa prop drilling), au unahitaji kuhamisha data ile ile kwa idadi kubwa ya vilengwa.

Katika hali hizi, muktadha unaweza kusaidia, ambao huruhusu data ya lengwa la mzazi iwapatikane kwa lengwa lolote la mtoto, bila kujali mahali palipo kwenye mti wa vilengwa, bila ya kuzipitia props. Kwa hiyo, data zitakubaliwa na vilengwa tu vinavyohitaji data hizo.

Ili kutumia muktadha, inabidi kuunda. Kwanza, tuunde faili MyContext.js na tuimporte ndani yake kitendo createContext:

Sasa tuunde kitu cha muktadha, tukiandika kwenye kutofautisha MyContext, ambacho tusisahau kuexport. Katika kesi yetu, tumeweka katika createContext thamani ya kuanzia null, kwani haina umuhimu kwetu (ingeweza kuachwa mabano tupu). Thamani iliyowekwa chaguomsingi itaonekana wakati wa kusoma muktadha, ikiwa hakuta muktadha mwingine wowote. Thamani hii inaweza kuwa ya aina yoyote:

Katika somo linalofuata tutaunda programu kutoka kwa vilengwa kadhaa, vilivyo kwenye faili tofauti. Ikiwa vilengwa vyote vingalikuwa kwenye faili moja, basi kwa ajili ya kuunda muktadha tusingalifanya faili tofauti na tusingaliexport.

Sasa hebu tuimporte MyContext.js ndani ya lengwa tupu App - ndani ya lengwa ambalo tunakusudia kutuma data: