Состояние и setState() в React | OTUS
⚡Подписка от OTUS!
Собери свой пул курсов на выгодных условиях. Подробности в чате →
Написать в чат

Курсы

Программирование
Разработчик программных роботов (RPA) на базе UiPath и PIX
-6%
Разработчик C#
-8%
Алгоритмы и структуры данных
-8%
Backend-разработчик на PHP
-8%
JavaScript Developer. Professional
-9%
Team Lead
-5%
Golang Developer. Professional
-6%
Agile Project Manager
-5%
Flutter Mobile Developer
-10%
MS SQL Server Developer
-8%
C++ Developer. Professional Android Developer. Professional Framework Laravel Cloud Solution Architecture Highload Architect Reverse-Engineering. Professional Kotlin Backend Developer React.js Developer VOIP инженер Нереляционные базы данных Scala-разработчик Супер-практикум по использованию и настройке GIT IoT-разработчик JavaScript Developer. Basic Advanced Fullstack JavaScript developer Unity Game Developer. Professional Супер-интенсив Azure
Инфраструктура
Супер-интенсив "Версионирование и командная работа с помощью Git"
-30%
Administrator Linux. Professional
-5%
Супер-интенсив «CI/CD или Непрерывная поставка с Docker и Kubernetes»
-30%
Разработчик программных роботов (RPA) на базе UiPath и PIX
-6%
Administrator Linux. Advanced
-8%
Infrastructure as a code in Ansible
-12%
Network engineer
-4%
MS SQL Server Developer
-8%
Cloud Solution Architecture Highload Architect Разработчик голосовых ассистентов и чат-ботов Мониторинг и логирование: Zabbix, Prometheus, ELK Супер-практикум по работе с протоколом BGP Супер - интенсив по паттернам проектирования Супер - интенсив по Kubernetes Архитектор сетей Супер-интенсив «IaC Ansible»
Специализации Курсы в разработке Подготовительные курсы
+7 499 938-92-02

Состояние и setState() в React

Скорее всего, многие из вас уже использовали состояния React и знаете, что в случае смены состояния React запускает процесс повторного отображения компонента (конечно, если вы не укажете иное в shouldComponentUpdate()). Но как же изменить состояние? Об этом и поговорим.

Для изменения состояния в React используется метод setState(). Этот метод принимает объект, объединяя его с текущим состоянием. Вдобавок к этому, существует еще пара нюансов, которые нужно понимать.

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

react2_1-1801-ab29c2.jpg

Гладя на изображение выше, становится очевидным, что сначала мы вызываем setState(), а потом console.log(). При этом новое значение переменной counter должно равняться единице, однако выводится ноль. А что делать, если мы желаем получить доступ к новому состоянию после того, как setState() в действительности обновит свое состояние?

И вот здесь мы плавно подошли к очередному моменту, который надо знать о setState(). Заключается он в том, что данный метод способен принимать callback-функцию.

Давайте внесем исправления в код:

react3_1-1801-d7bffe.jpg

Казалось бы, всё работает, то есть на этом можно закончить. Но ничего подобного. На деле в этом случае мы не применяем setState() корректно. Вместо того, чтобы передавать объект, мы передаем методу функцию. Обычно, так делается, если для установки нового состояния применяется состояние текущее. Если же это не ваш случай, то можно продолжать передавать объект в setState(). Давайте исправим код ещё раз:

react4_1-1801-183ec5.jpg

Вот для этого примера CodePen.

Какой же смысл в передаче функции вместо объекта?

Дело в том, что так как setState() является асинхронным методом, то полагаться на него во время создания нового значения относительно рискованно. К примеру, в момент запуска одного setState() другой setState() может уже обновить состояние.

Что касается передачи функции в setState(), то она предоставляет 2 преимущества: 1. Появляется возможность создавать статичную копию состояния, которое само по себе никогда не изменится. 2. Вызовы setState() будут помещены в очередь, в результате чего они станут запускаться по порядку.

Давайте рассмотрим следующий пример, где мы пытаемся увеличить счётчик на два, применяя 2 последовательных вызова setState():

react5_1-1801-548352.jpg

Сравниваем с кодом ниже:

react6_1-1801-a2deb8.jpg

CodePen здесь. На первом изображении обе функции setState() используют this.state.counter напрямую, который останется со значением ноль после нашего первого вызова setState(). В результате конечное значение будет равно 1, а не 2, ведь обе функции setState() устанавливают, что значение счетчика равно единице.

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

Пожалуй, это все, что надо знать о состояниях в React.

Первоисточник

Не пропустите новые полезные статьи!

Спасибо за подписку!

Мы отправили вам письмо для подтверждения вашего email.
С уважением, OTUS!

Автор
1 комментарий
2

Пожалуй, это все, что надо знать о состояниях в React.

Неа, не всё. :)

Вы не упомянули про callback-функцию, которая передается 2ым аргументом в setState() и вызывается после установки нового состояния.

Для комментирования необходимо авторизоваться