React-da useEffect arkaly global işleýjiler

Indi diňe düwmä basmak arkaly däl-de, çyzyk düzüminde Enter basylanda-da reňk üýtgermegini isleýändigimizi farz edeliň. Adaty React durmuşynda window global obyektine addEventListener ulanyp gulap bolmaýar. Bu maksat üçin biziň efektlerimiz bar. Geliň bu hereketi useEffect arkaly goşalyň.

Enter basylanda işleýji funksiýany ýazalyň. Bu ýagdaýda reňk gyzyl bolup üýtgersin:

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

Indi waka gulaşdyrmagy window-a useEffect hook içinde baglalyň:

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

Eger biziň durnukly ýerleşdiriji funksiýamyz bar bolsa, useEffect içinde daýma arassalaýyş ýa-da yzygiderliligi ýatyryş koduny yzyna gaýtarmaly, soňrak meselelerden gaça durmak üçin. Bu ýagda, biz addEventListener birikdirenimizden soň, ony aýyrmagy yzyna gaýtarmaly:

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