Руководство по useState в React
Ваша строка пароля меняется со «слабой» на «сильную» по мере ввода. React запоминает ваш ввод с помощью состояния (state).
Состояние хранит данные. Оно отслеживает то, что вы печатаете или на что нажимаете.
Представьте, что вы вводите свое имя.
- Ваше начальное состояние — пустая строка.
- Вы вводите J.
- Вы вызываете функцию, чтобы обновить состояние с "" на "J".
- Вы вводите o.
- Вы вызываете функцию, чтобы изменить состояние на "Jo".
Каждый раз, когда вы обновляете состояние, React перерисовывает (re-renders) интерфейс. Перерисовка означает, что React очищает старое представление и рисует новое с вашими обновленными данными.
Почему нельзя использовать обычные переменные? Обычная переменная меняется в вашем коде, но не обновляет экран. Ваши пользователи будут видеть старые данные. Состояние React решает эту проблему, связывая ваши данные с интерфейсом.
Как использовать useState:
Импортируйте его из React.
import { useState } from 'react';Объявите его.
const [age, setAge] = useState(20);
В этом примере:
age— это ваше текущее значение.setAge— это функция для изменения значения.20— это ваше начальное значение.
Попробуйте это прямо сейчас. Откройте проект React. Создайте счетчик. Нажмите на кнопку, чтобы обновить значение. Посмотрите, как экран мгновенно меняется.
Источник: https://dev.to/kaleablemmadev/usestate-in-react-a-beginners-guide-1j8i