Efekti konks useEffect Reactis

Efektega töötamiseks kasutatakse konksu useEffect. Vaatame selle tööd.

Alustuseks impordime oma konksu:

App.jsximport { useEffect } from 'react';

Loome komponendi App, mis sisaldab pealkirja:

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

export default App;

Oletame, et peame pärast renderdamist tegema mingi tegevuse, näiteks määrama kogu lehe taustavärvi. Sellisel juhul on väliseks süsteemiks brauseri DOM.

Rakendame oma konksu:

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

Teise parameetrina edastatakse sõltuvuste massiiv. Need sisaldavad väärtusi, mida kasutavad komponendi funktsioonid. Praegu jätsime selle tühjaks. Sellisel juhul määratakse värv roheliseks ainult üks kord pärast renderdamist. Teist parameetrit ei saa täielikult eemaldada, kuna teie komponent võib minna lõputusse tsüklisse.