React හි useEffect බලපෑම් හූක්

බලපෑම් සමඟ වැඩ කිරීම සඳහා useEffect හූක් භාවිතා කරනු ලැබේ. අපි එහි ක්‍රියාකාරිත්වය දෙස බලමු.

පළමුව, අපගේ හූක් ආයාත කරමු:

App.jsximport { useEffect } from 'react';

ශීර්ෂකයක් අඩංගු App සංරචකයක් සාදමු:

App.jsxfunction App() {
  return (
    <div>
      <h1>React App</h1>
    </div>
  );
}

export default App;

අපි හිතමු, අපට අන්තර්ගතය පෙන්වීමෙන් පසු කිසියම් ක්‍රියාවක් සිදු කිරීමට අවශ්‍ය යැයි, උදාහරණයක් ලෙස, සම්පූර්ණ පිටුවේ පසුබිම් වර්ණය සකස් කිරීමට. මෙම නඩුවේදී, පිටත පද්ධතිය වනුයේ බ්‍රවුසරයේ DOM වේ.

අපගේ හූක් යොදමු:

App.jsxfunction App() {
  useEffect(() => {
    document.body.style.backgroundColor = 'green';
  }, []);
  
  ...
}

දෙවන පරාමිතියේදී යැපීම් අරාව ලබා දෙනු ලැබේ. සංරචකයේ ශ්‍රිත මගින් භාවිතා කරන අගයන් එහි ඇතුළත් වේ. දැනට අපි ඒවා හිස්ව තැබුවෙමු. මෙම අවස්ථාවේදී, පසුබිම් වර්ණය කොළ පැහැයට සකස් වන්නේ අන්තර්ගතය පෙන්වීමෙන් පසු වරක් පමණි. දෙවන පරාමිතිය සම්පූර්ණයෙන්ම ඉවත් කළ නොහැක, මන්ද ඔබගේ සංරචකය අනන්ත ලූපයකට ඇතුළු විය හැකිය.