Чтобы получить доступ к хуку useState, вы должны убедиться, что используете React 16.8 и выше.
Прежде чем погрузиться в хуки useState, давайте сначала разберемся с хуками React.
Что такое перехватчики React?
Перехватчики React - это специальные функции, которые позволяют нам получать доступ к состояниям React и его методам жизненного цикла внутри функциональных компонентов. До React 16.8 для добавления состояний или любого метода жизненного цикла к компоненту в React нам приходилось использовать компонент класса, а не функциональный компонент. Чтобы решить эту проблему, в React были введены хуки.
Что такое перехватчик useState?
Перехватчик useState - это перехватчик React, используемый для добавления состояний к функциональному компоненту.
Понимание синтаксиса:
const [stateVariable, setStateVariable] = useState(initialValue);
Хук useState принимает один аргумент, который является начальным значением состояния. Каждый раз, когда приложение обновляется или сбрасывается, состояние будет установлено на это указанное начальное значение.
Хук возвращает массив из 2 элементов. Следовательно, мы деструктурируем массив, чтобы получить элементы, возвращаемые хуком.
Эти два элемента:
- stateVariable: это переменная, которую мы можем использовать для доступа к состоянию внутри приложения.
- setStateVariable: это функция, с помощью которой мы можем обновить stateVariable внутри нашего приложения. Он принимает обновленное значение состояния.
Практическое использование:
Чтобы понять использование ловушки, мы создаем функциональный компонент, который имеет тег ввода. Когда пользователь изменяет значение внутри входного тега, состояние будет обновлено.
Фрагмент кода:
В этом компоненте наше состояние - это переменная значения. setValue - это функция, которая принимает обновленное / новое значение состояния и обновляет состояние.
Мы устанавливаем значение входного тега как состояние значения. Каждый раз, когда мы меняем значение входного тега, вызывается функция onChange. Функция onChange выполняет функцию setValue и обновляет значение переменной состояния.
Итак, все дело в хуке useState в React. Спасибо за прочтение.
