Независимое состояние
Часть раздела Основы путешествия по React на Coddy. Урок 26 из 42.
Нужно запомнить две вещи? Вызовите useState дважды. Каждый вызов создает полностью независимую часть состояния:
const [cats, setCats] = useState(0);
const [dogs, setDogs] = useState(0);Обновление cats приводит к повторному рендеру компонента, а значение dogs остаётся нетронутым. У каждого состояния есть свой сеттер, и их путаница — самая распространённая ошибка новичков: setCats(dogs + 1) компилируется без проблем, но всё равно является ошибкой.
Задание
СреднеУправляйте доской приёма в приюте: два счётчика, которые не мешают друг другу.
- Добавьте два состояния,
catsиdogs, оба со начальным значением 0. - Отобразите их в
id="cats"иid="dogs". - Кнопка
id="add-cat"добавляет одну кошку;id="add-dog"добавляет одну собаку.
Попробуйте сами
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
Проверьте себяВ этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Основы
1Знакомство с React
Что такое React?Ваш первый компонентПравило одного родителяJSX — это не HTMLИтоги: Знакомство с React2Выражения JSX
Фигурные скобкиМатематика в скобкахСкобки в атрибутахВызов функций в JSXИтоги: Выражения JSX5Состояние и события
Что такое состояние?Счетчик кликовСчетчик с шагомПереключение с помощью состоянияНезависимое состояниеИтоги: Состояние и события