Globálne obsluhy prostredníctvom useEffect v Reacte

Predpokladajme, že teraz chceme, aby sa farba menila nielen kliknutím na tlačidlo, ale aj stlačením Enter na klávesnici. V bežnom React živote nie je možné počúvať na globálny objekt window použitím addEventListener. Na to máme efekty. Pridajme túto akciu pomocou useEffect.

Napíšme funkciu obsluhy pre kliknutie na Enter. Nech farba v tomto prípade zmení na červenú:

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

Teraz pripojme počúvanie udalostí na window v hooku useEffect:

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

Ak máme nejakú inštalačnú funkciu, vždy musíme v useEffect vrátiť kód na vyčistenie alebo odhlásenie, aby sme sa vyhli problémom v budúcnosti. V tomto prípade potrebujeme po pripojení addEventListener vrátiť jeho odstránenie:

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