ශ්‍රී ලංකාවේ නවතම තාක්ෂණික පුවත් 2026-07-24, Friday
💻 ක්‍රමලේඛනය · 🕒 කියවීමට විනාඩි 2 · 👁 1

React කොම්පෝනන්ට් ජීවිත චක්‍රය: සරල පැහැදිලි කිරීම සහ අන්තර්ක්‍රියාකාරී රූපය

React කොම්පෝනන්ට් ජීවිත චක්‍රය: සරල පැහැදිලි කිරීම සහ අන්තර්ක්‍රියාකාරී රූපය

React අඩු පළපුරුදු දැනුමක් ඇති අය සඳහා කොම්පෝනන්ට් ජීවිත චක්‍රය (Lifecycle) ගැන සරලව, පියවරෙන් පියවර කියා දෙන ලිපියක් මෙන්න. පාරම්පරික class‑කොම්පෝනන්ට් වලින් function‑කොම්පෝනන්ට් වල Hook useEffect වෙත පරිවර්තනය කරන විදිහත්, අලුත්ම React ව්‍යාපෘතියකදී එම මූලික අදහස් අමතක නොකරන්න.

React කොම්පෝනන්ට් එකක් උපතේ සිට මැරෙන තෙක් තිදෙනක් මූලික අවධි තුනක් ගෙවයි: Mounting (නිර්මාණය), Updating (යාවත්කාලීන) සහ Unmounting (ඉවත් කිරීම). එයට අමතරව දෝෂ හසුරවීමේ (Error handling) අවස්ථාවක්ද ඇත. Class‑කොම්පෝනන්ට් වලදී මේ අවස්ථා සලකා බලන විශේෂ ක්‍රම (methods) ඇත – constructor, getDerivedStateFromProps, render, componentDidMount, shouldComponentUpdate, getSnapshotBeforeUpdate, componentDidUpdate, componentWillUnmount, getDerivedStateFromError, componentDidCatch ආදී.

මෙම ක්‍රමයන් දෙකක් අතර ප්‍රධාන වෙනසක් තියෙනවා: Render Phase සහ Commit Phase. Render Phase එකේ UI එක කෙරෙහි අදහස් ගණනය කරයි – props, state කියවීම, JSX ආදිය. මෙහිදී API ඇමතුම්, timers, DOM මාරුකිරීම් වැනි side‑effect කාර්යයන් නොකළ යුතුය. Commit Phase එකේ React DOM‑යට වෙනස්කම් යොදයි; එතැනදී data fetch, subscription සකස් කිරීම, timer ආරම්භ කිරීම වැනි side‑effect ක්‍රියා කළ හැක.

ශ්‍රී ලංකාවට ඇති වැදගත්කම

ශ්‍රී ලංකාවේ වැඩිහිටියන්, විශ්වවිද්‍යාල සිසුන්, තාක්ෂණ ආරම්භකයින්ට React Lifecycle අර්ථ දැන ගැනීම විශාල වාසියක්. ප්‍රායෝගිකව class‑කොම්පෝනන්ට් වලින් පසුතැවෙන පරණ කේත පදනම පවත්වා ගැනීමට, Hook‑වලට පරිවර්තනයේදී ගැටළුවක් නොවෙයි. ඉතිරියට, Interview වල Lifecycle ප්‍රශ්න බොහොමයක් පැනේ; එම නිසා සකස් කරගත් මූලික අදහස් ඔබේ රැකියා අවස්ථාවන්ට වඩාත් උසස් කරයි.

ඉන්පසු, Error Boundary වැනි class‑කොම්පෝනන්ට් භාවිතා කරමින් වැඩ කරන සංස්ථා වලට මේ මූලික තේරුම අවශ්‍යයි. එමඟින් production පරිසරයේ දෝෂ හසුරවීමේ ක්‍රමවේදය වඩාත් විශ්වාසදායක කරයි. තවත් වාසියක් නම්, Hook‑වල useEffect, useLayoutEffect ආදිය Render‑Commit සංකල්පයට සෘජුවම ගැලපෙයි – ඒ නිසා නවතම React ලේඛන කියවීමේදී අඩු කාලයකින් ඉගෙන ගත හැක.

අවසන් වශයෙන්, ලිපියේ අන්තර්ක්‍රියාකාරී රූපය (interactive diagram) ඔබට ඉක්මනින් ක්‍රමවල අනුපිළිවෙල තේරුම් ගත හැකි කරයි. මේ රූපය bookmark කරගෙන, ඔබේ කණ්ඩායම සමඟ හුවමාරු කරගත හැක.

React ජීවිත චක්‍රය පිළිබඳ අවබෝධය ඔබේ ව්‍යාපෘතිවල කාර්යක්ෂමතාවය වැඩි කරයි. අදම මේ මූලික කරුණු අධ්‍යයනය කර, ඔබේ කේතය තවත් ශක්තිමත් කරගන්න.

💡 React ජීවිත චක්‍රය දැන්ම අධ්‍යයනය කර, ඔබේ කේතය ශක්තිමත් කරගන්න!
මූලාශ්‍රය මෙම ලිපිය AI මගින් රචිත මුල් සාරාංශයකි. සම්පූර්ණ වාර්තාව කියවන්න:
Dev.to ↗
#React #Lifecycle #Hooks #WebDev #SriLanka