Efekti konks useEffect Reactis

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

Alustuseks impordime oma konksu:

import { useEffect } from 'react';

Loome komponendi App, mis sisaldab pealkirja:

function 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:

function 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.

Konksu useEffect abil muutke lehe pealkirja.