React හි සන්දර්භය
ඊළඟ hook එක අධ්යයනය කිරීමට පෙර, අපි 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 තුළට ආයාත කරන්න,
පාඩමේ විස්තර කර ඇති පරිදි.