Переход с JavaScript на платформу React может показаться пугающим, когда вы впервые совершаете переход. Это также может заставить вас задаться вопросом, почему кто-то вообще использует JavaScript вместо React…

React предоставляет определенные способы структурирования и организации макета вашей веб-страницы, что приносит с собой новый синтаксис, системы и функции. Одним из очень важных инструментов в React, на котором мы собираемся сосредоточиться, является система состояний React.

Что именно «является» государством? «Состояние — это динамические данные в вашем компоненте: они меняются со временем, когда пользователи взаимодействуют с вашим приложением». В отличие от реквизитов компонента, состояние компонента может меняться на протяжении всей жизни компонента. «Используя состояние» мы можем обновлять или поддерживать определенные данные/информацию в этом состоянии без необходимости изменения родительского компонента для обновления компонента в состоянии информации.

Это подводит нас к одному из основных способов использования состояния — хуку useState React. Итак, давайте посмотрим на то, как и что с хуком useState более управляемым способом:

Перво-наперво, в верхней части любого файла компонента, где вы планируете/использовали хук useState, обязательно добавьте специальную функцию React Hook, которая позволяет использовать хук useState:

После того, как вы импортировали useState, вы можете настроить хук useState в функции компонентов:

В функции haveDog этого компонента мы создали хук useState, теперь что означает это «const [haveDog, setHaveDog] = useState(false)»?

  • const = создание константы
  • haveDog = — это текущее состояние, которое, если вы посмотрите на useState, равно false — в настоящее время значение haveDog равно false
  • setHaveDog = — это функция установки, которая используется для обновления состояния и будет обновляться асинхронно.

Примечание. «Асинхронное программирование — это метод, который позволяет вашей программе запускать потенциально длительную задачу и по-прежнему иметь возможность реагировать на другие события во время выполнения этой задачи, а не ждать завершения этой задачи».

  • = useState(false) = начальное состояние хука useState

Чтобы поместить эти объяснения в «строку» слов, если хотите — хук useState позволяет разработчику иметь переменные в состоянии в этом функциональном компоненте JSX. Аргумент useState(false) — это начальное состояние, которое возвращает haveDog (значение состояния) и setHaveDog (функция/функция установки для обновления состояния ценить).

Пример того, как использовать этот хук useState, может выглядеть так:

В приведенном выше примере мы использовали функцию установки setHaveDog, чтобы изменить значение состояния haveDog на «true», чтобы получить желаемый результат, который мы хотим получить при использовании функцию handleBuyDog.

Однако важно отметить, что этот хук useSate с начальным значением «false» можно использовать снова и что начальное значение useState = (false) остается в состоянии. Только при использовании функции handleBuyDog наше состояние имеет значение «истина».

Мы могли бы зайти в довольно длинную кроличью нору с состоянием и хуком UseState, как и почти с любой темой языка программирования. Но для целей этого блога необходимо помнить следующие основные элементы:

  • «Состояние — это данные, которые являются динамическими в компоненте, то есть они меняются со временем, когда пользователи взаимодействуют с приложением — состояние компонента может меняться в течение срока службы компонента».

Хук useState состоит из трех вещей: текущего значения состояния, функции установки для обновления этого значения состояния и начального значения:

  • currentStateValue = текущее значение состояния, начальное значение до изменения функцией установки
  • setterFunction = функция установки для обновления состояния

ПРИМЕЧАНИЕ. Функция установки всегда должна называться набором «currentStateName», т.е. const [haveDog, setHaveDog]

  • useState(initialValue) = начальное значение состояния.

И всегда убедитесь, что вы импортируете состояние из React в свой компонент, прежде чем использовать хук useState!

  • импортировать{useState} форму «реагировать»

Источники: