Efekta āķis useEffect React

Lai strādātu ar efektiem, tiek izmantots āķis useEffect. Apskatīsim, kā tas darbojas.

Vispirms importēsim mūsu āķi:

import { useEffect } from 'react';

Izveidosim komponentu App, kas satur virsrakstu:

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

export default App;

Pieņemsim, ka mums pēc renderēšanas jāveic kāda darbība, piemēram, jāiestata visas lapas fona krāsa. Šajā gadījumā ārējā sistēma būs pārlūkprogrammas DOM.

Pielietosim mūsu āķi:

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

Otrajā parametrā tiek padots atkarību masīvs. Tajā ietilpst vērtības, ko izmanto komponenta funkcijas. Pagaidām mēs to atstājām tukšu. Šajā gadījumā krāsa tiks iestatīta uz zaļu tikai vienu reizi pēc renderēšanas. Otro parametru nevar pilnībā noņemt, jo jūsu komponents varētu iekļūt bezgalīgā ciklā.

Izmantojot āķi useEffect, mainiet lapas nosaukumu.