Afhanklikhede in useEffect in React

Laat ons nou die kleur verander wanneer 'n knoppie gedruk word. Ons sal 'n toestand color vir die kleur skep, met 'n aanvanklike waarde:

const [color, setColor] = useState('green');

Vervang die stringwaarde met ons toestand in useEffect en moenie vergeet om dit by die lys van afhanklikhede in die vierkantige hakies te voeg nie. Die effek sal nou uitgevoer word elke keer as die toestand color verander:

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

	...
}

Laat ons nou 'n knoppie byvoeg om die kleur in ons komponent te verander:

return (
	<div>
		<h1>React App</h1>
		<button onClick={changeColor}>change</button>
	</div>
);

Voeg ook 'n klikhanteringsfunksie by, wat ons kleur na oranje sal verander:

function changeColor() {
	setColor('orange');
}

Daar is 'n toestand met die gebruiker se naam. Maak dit so dat elke keer as die naam verander, die waarde van die toestand in die leser se plaaslike berging geskryf word.