Efekto valdiklis useEffect React

Efektynai dirbti naudojamas valdiklis useEffect. Pažiūrėkime, kaip jis veikia.

Pirmiausia importuokime savo valdiklį:

App.jsximport { useEffect } from 'react';

Sukurkime komponentą App, kuriame yra antraštė:

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

export default App;

Tarkime, kad po atvaizdavimo turime atlikti kokį nors veiksmą, pavyzdžiui, nustatyti viso puslapio fono spalvą. Šiuo atveju išorine sistema bus naršyklės DOM.

Pritaikykime savo valdiklį:

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

Antrame parametre perduodamas priklausomybių masyvas. Į jį įeina reikšmės, naudojamos komponento funkcijose. Kol kas palikome jį tuščią. Tokiu atveju spalva bus nustatyta žalia tik vieną kartą po atvaizdavimo. Visai pašalinti antrą parametro negalima, nes jūsų komponentas gali patekti į begalinį ciklą.