Závislosti v useEffect v Reactu
Nyní budeme měnit barvu po kliknutí
na tlačítko. Vytvoříme stav color pro barvu,
a nastavíme mu počáteční hodnotu:
const [color, setColor] = useState('green');
Nahradíme řetězcovou hodnotu naším stavem
v useEffect a nezapomeneme jej přidat
do seznamu závislostí v hranatých závorkách.
Nyní se efekt bude spouštět pokaždé
při změně stavu color:
function App() {
useEffect(() => {
document.body.style.backgroundColor = color;
}, [color]);
...
}
Nyní přidáme tlačítko pro změnu barvy do naší komponenty:
return (
<div>
<h1>React App</h1>
<button onClick={changeColor}>change</button>
</div>
);
Přidáme také funkci obsluhy kliknutí, která změní naši barvu na oranžovou:
function changeColor() {
setColor('orange');
}
Je dán stav s uživatelským jménem. Zařiďte, aby pokaždé při změně jména se hodnota stavu zapsala do lokálního úložiště prohlížeče.
