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:

App.jsxconst [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:

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

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

App.jsxreturn (
  <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:

App.jsxfunction changeColor() {
  setColor('orange');
}