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

Таким образом, React предоставляет еще одну функцию для манипулирования данными, известную как Состояние. В этой статье вы узнаете, что такое "состояние" в React и как его использовать.

Что такое государство?

Мы можем объяснить state менее чем за 5 частей:

  • Состояние — это специальный объект, который содержит динамические данные, что означает, что состояние может меняться с течением времени и в любое время в зависимости от действий пользователя или определенных событий.
  • Состояние является частным и принадлежит только его компоненту, где он определен, к нему нельзя получить доступ извне, но его можно передать дочерним компонентам через свойства.
  • Состояние инициализируется внутри метода конструктора его компонента.
  • Когда происходит изменение состояния, состояние не должно изменяться напрямую. Вместо этого обновления состояния следует выполнять с помощью специального метода, называемого setState().
  • Не следует чрезмерно использовать состояние, чтобы предотвратить проблемы с производительностью.

Итак, это пункты, в основном объясняющие, что такое состояние, теперь давайте посмотрим, как его использовать…

Использование состояния в компоненте

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

Здесь мы рассмотрим только классическое использование состояния с компонентами класса.

Создание государства

Если вы знакомы с объектно-ориентированным программированием, то знаете, что существует структура под названием класс.

У класса есть специальный метод, называемый constructor(), и он вызывается во время создания объекта. Мы также можем инициализировать свойства нашего объекта или связывать события внутри constructor().

То же правило применяется к состоянию. Поскольку состояние также является объектом, его следует инициализировать внутри метода конструктора:

а позже мы можем визуализировать свойства объекта состояния с помощью точечной нотации JavaScript внутри метода render():

Теперь давайте сделаем шаг вперед и посмотрим, как обновить состояние.

Обновление состояния

Состояние компонента может измениться при некоторых обстоятельствах, таких как ответ сервера или взаимодействие с пользователем (нажатие кнопки, прокрутка страницы и т. д.).

Поэтому при изменении данных, когда происходит изменение состояния, React берет эту информацию и обновляет пользовательский интерфейс.

Важным моментом здесь является то, что мы не должны изменять состояние напрямую.

Не изменять состояние напрямую — официальные документы React

Поэтому мы не должны изменять свойство состояния, как мы делаем это для других объектов в JavaScript. Вместо этого React предоставляет другой способ обработки изменений состояния: метод setState().

Использование setState()

Ниже вы можете увидеть правильный способ изменения состояния в React:

Причина, по которой мы должны использовать setState(), заключается в том, что это единственный способ уведомить React об изменениях данных. В противном случае React не получит уведомления и не сможет обновить пользовательский интерфейс.

Понимание того, как работает State, является одной из самых важных частей изучения React. Как только вы поймете, как использовать свойства и состояние вместе, разработка приложений React станет намного проще и приятнее.

Есть вопрос или дополнение? Оставить комментарий.

Спасибо за чтение. :)