React разделяет передачу данных и управление данными с помощью свойств и состояния. Реквизиты используются только для передачи данных. Они только для чтения, что означает, что компоненты, получающие данные через пропсы, не могут их изменить. Однако в некоторых случаях компоненту может потребоваться манипулировать данными, что невозможно с реквизитами.
Таким образом, React предоставляет еще одну функцию для манипулирования данными, известную как Состояние. В этой статье вы узнаете, что такое "состояние" в React и как его использовать.
Что такое государство?
Мы можем объяснить state менее чем за 5 частей:
- Состояние — это специальный объект, который содержит динамические данные, что означает, что состояние может меняться с течением времени и в любое время в зависимости от действий пользователя или определенных событий.
- Состояние является частным и принадлежит только его компоненту, где он определен, к нему нельзя получить доступ извне, но его можно передать дочерним компонентам через свойства.
- Состояние инициализируется внутри метода конструктора его компонента.
- Когда происходит изменение состояния, состояние не должно изменяться напрямую. Вместо этого обновления состояния следует выполнять с помощью специального метода, называемого setState().
- Не следует чрезмерно использовать состояние, чтобы предотвратить проблемы с производительностью.
Итак, это пункты, в основном объясняющие, что такое состояние, теперь давайте посмотрим, как его использовать…
Использование состояния в компоненте
Раньше состояние можно было использовать только в компонентах класса, но после появления перехватчиков React состояние теперь можно использовать как в классе, так и в функциональных компонентах.
Здесь мы рассмотрим только классическое использование состояния с компонентами класса.
Создание государства
Если вы знакомы с объектно-ориентированным программированием, то знаете, что существует структура под названием класс.
У класса есть специальный метод, называемый constructor(), и он вызывается во время создания объекта. Мы также можем инициализировать свойства нашего объекта или связывать события внутри constructor().
То же правило применяется к состоянию. Поскольку состояние также является объектом, его следует инициализировать внутри метода конструктора:
а позже мы можем визуализировать свойства объекта состояния с помощью точечной нотации JavaScript внутри метода render():
Теперь давайте сделаем шаг вперед и посмотрим, как обновить состояние.
Обновление состояния
Состояние компонента может измениться при некоторых обстоятельствах, таких как ответ сервера или взаимодействие с пользователем (нажатие кнопки, прокрутка страницы и т. д.).
Поэтому при изменении данных, когда происходит изменение состояния, React берет эту информацию и обновляет пользовательский интерфейс.
Важным моментом здесь является то, что мы не должны изменять состояние напрямую.
Не изменять состояние напрямую — официальные документы React
Поэтому мы не должны изменять свойство состояния, как мы делаем это для других объектов в JavaScript. Вместо этого React предоставляет другой способ обработки изменений состояния: метод setState().
Использование setState()
Ниже вы можете увидеть правильный способ изменения состояния в React:
Причина, по которой мы должны использовать setState(), заключается в том, что это единственный способ уведомить React об изменениях данных. В противном случае React не получит уведомления и не сможет обновить пользовательский интерфейс.
Понимание того, как работает State, является одной из самых важных частей изучения React. Как только вы поймете, как использовать свойства и состояние вместе, разработка приложений React станет намного проще и приятнее.
Есть вопрос или дополнение? Оставить комментарий.
Спасибо за чтение. :)