Učinek useEffect v Reactu

Za delo z učinki se uporablja kljuka useEffect. Poglejmo, kako deluje.

Najprej uvozimo našo kljuko:

App.jsximport { useEffect } from 'react';

Ustvarimo komponento App, ki vsebuje naslov:

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

export default App;

Recimo, da moramo narediti neko dejanje po upodabljanju, na primer, nastaviti barvo ozadja celotne strani. V tem primeru bo zunanji sistem DOM brskalnika.

Uporabimo našo kljuko:

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

V drugem parametru se posreduje matrika odvisnosti. Vključujejo vrednosti, ki jih uporabljajo funkcije komponente. Za zdaj smo jih pustili prazne. V tem primeru se bo barva nastavila na zeleno samo enkrat po upodabljanju. Popolnoma odstraniti drugi parameter ni mogoče, ker lahko vaša komponenta vstopi v neskončno zanko.