React හි useEffect හරහා ගෝලීය සංසාධක

දැන් අපට අවශ්‍ය යැයි සිතමු, පිහිටුම් බොත්තම ක්ලික් කිරීම මත පමණක් නොව, කිවුස්පතෙහි Enter යතුර එබීම මත ද වර්ණය වෙනස් වේ. සාමාන්‍ය React ජීවිතයේදී, window ගෝලීය වස්තුව addEventListener භාවිතා කර අසා නොයෙදිය හැකිය. මේ සඳහා අපට ඇත්තේ බලපෑම්. අපි useEffect භාවිතා කර මෙම ක්‍රියාව එකතු කරමු.

Enter එබීම සඳහා සංසාධක ශ්‍රිතය ලියමු. මෙම අවස්ථාවේදී වර්ණය රතු පැහැයට වෙනස් වේවා:

App.jsxfunction handleEnter(event) {
  if (event.keyCode === 13) {
    setColor('red');
  }
}

දැන් අපි useEffect හූක් තුළ window වෙත සිදුවීම් සවන් දීම බැඳීම කරමු:

App.jsxuseEffect(() => {
  document.body.style.color = color;
  
  window.addEventListener('keydown', handleEnter);
}, [color]);

අපට කිසියම් සැකසුම් ශ්‍රිතයක් තිබේ නම්, අනාගත ගැටලු වළක්වා ගැනීම සඳහා useEffect හිදී සැමවිටම ඉවත් කිරීමේ හෝ දායකත්වය අවලංගු කිරීමේ කේතය ආපසු ලබා දිය යුතුය. මෙම අවස්ථාවේදී, අපි addEventListener අමුණා ඇති නිසා එය ඉවත් කිරීම ආපසු ලබා දිය යුතුය:

App.jsxuseEffect(() => {
  document.body.style.color = color;
  
  window.addEventListener('keydown', handleEnter);
  
  return () => {
    window.removeEventListener('keydown', handleEnter);
  };
}, [color]);