Abhängigkeiten in useEffect in React

Jetzt lassen wir die Farbe durch Klick auf einen Button ändern. Wir erstellen einen State color für die Farbe und weisen ihm einen Anfangswert zu:

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

Wir ersetzen den String-Wert durch unseren State in useEffect und vergessen nicht, ihn in die Abhängigkeitsliste in eckigen Klammern aufzunehmen. Jetzt wird der Effekt jedes Mal ausgeführt, wenn sich der State color ändert:

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

Fügen wir nun einen Button zum Wechseln der Farbe zu unserer Komponente hinzu:

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

Wir fügen auch eine Handler-Funktion für den Klick hinzu, die unsere Farbe auf Orange ändert:

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

Gegeben ist ein State mit dem Benutzernamen. Sorgen Sie dafür, dass bei jeder Änderung des Namens der Wert des States im lokalen Speicher des Browsers gespeichert wird.