Die Effekhaak useEffect in React

Vir die werk met effekte word die haak useEffect gebruik. Kom ons kyk na hoe dit werk.

Laat ons eers ons haak invoer:

import { useEffect } from 'react';

Kom ons skep 'n App komponent wat 'n opskrif bevat:

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

export default App;

Gestel ons moet iets doen na die weergave, byvoorbeeld, die agtergrondkleur van die hele bladsy instel. In hierdie geval sal die eksterne stelsel die blaaier se DOM wees.

Laat ons ons haak toepas:

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

In die tweede parameter word 'n afhanklikheidsversameling oorgedra. Dit sluit waardes in wat deur die funksies van die komponent gebruik word. Vir nou het ons dit leeg gelaat. In hierdie geval sal die kleur na groen verander net een keer na die weergave. Jy kan die tweede parameter nie heeltemal weggooi nie, omdat jou komponent dan in 'n oneindige lus kan beland.

Verander die bladsytitel met behulp van die haak useEffect.