Зависимости в useEffect в React
Теперь давайте будем менять цвет по нажатию
кнопки. Заведем стейт color для цвета,
задав ему начальное значение:
const [color, setColor] = useState('green');
Заменим строковое значение на наш стейт
в useEffect и не забудем добавить его
в список зависимостей в квадратных скобках.
Теперь эффект будет выполняться каждый
раз при изменении стейта color:
function App() {
useEffect(() => {
document.body.style.backgroundColor = color;
}, [color]);
...
}
Давайте теперь добавим кнопку для смены цвета в наш компонент:
return (
<div>
<h1>React App</h1>
<button onClick={changeColor}>change</button>
</div>
);
Добавим также функцию обработчика клика, которая будет менять наш цвет на оранжевый:
function changeColor() {
setColor('orange');
}
Дан стейт с именем пользователя. Сделайте так, чтобы каждый раз при изменении имени, значение стейта записывалось в локальное хранилище браузера.