Чем декларативное программирование отличается от императивного? Какой подход используется в React? Flashcards
Чем декларативное программирование отличается от императивного? Какой подход используется в React?
React предоставляет декларативный способ управления пользовательским интерфейсом. Вместо непосредственного управления отдельными частями пользовательского интерфейса вы описываете различные состояния, в которых может находиться ваш компонент, и переключаетесь между ними в ответ на ввод данных пользователем.
Когда вы разрабатываете взаимодействия с пользовательским интерфейсом, вы, вероятно, думаете о том, как изменяется пользовательский интерфейс в ответ на действия пользователя. Рассмотрите форму, которая позволяет пользователю отправлять ответ:
Когда вы вводите что-либо в форму, кнопка “Отправить” становится включенной.
Когда вы нажимаете “Отправить”, и форма, и кнопка становятся недоступными, и появляется счетчик .
Если сетевой запрос выполнен успешно, форма скрывается, и появляется сообщение “Спасибо”.
Если сетевой запрос завершается неудачно, появляется сообщение об ошибке, и форма снова становится включенной.
В императивном программировании вышесказанное напрямую соответствует тому, как вы реализуете взаимодействие. Вы должны написать точные инструкции для управления пользовательским интерфейсом в зависимости от того, что только что произошло. Вот еще один способ подумать об этом: представьте, что вы едете рядом с кем-то в машине и указываете ему поворот за поворотом, куда ехать.
Они не знают, куда вы хотите попасть, они просто следуют вашим командам. (И если вы неправильно укажете направление, вы окажетесь не в том месте!) Это называется императивом, потому что вы должны “командовать” каждым элементом, от счетчика до кнопки, сообщая компьютеру, как обновить пользовательский интерфейс.
Обязательное управление пользовательским интерфейсом работает достаточно хорошо для отдельных примеров, но в более сложных системах управлять им становится экспоненциально сложнее. Представьте себе обновление страницы, полной различных форм, подобных этой. Добавление нового элемента пользовательского интерфейса или нового взаимодействия потребует тщательной проверки всего существующего кода, чтобы убедиться, что вы не внесли ошибку (например, забыли что-то показать или скрыть).
React был создан для решения этой проблемы.
В React вы не управляете пользовательским интерфейсом напрямую — это означает, что вы не включаете, отключаете, не показываете и не скрываете компоненты напрямую. Вместо этого вы объявляете, что хотите показать, а React определяет, как обновить пользовательский интерфейс. Представьте, что вы садитесь в такси и говорите водителю, куда вы хотите ехать, вместо того, чтобы указывать ему, где именно повернуть. Доставить вас туда - задача водителя, и он может даже знать несколько коротких путей, которые вы не учли!
Декларативное представление об пользовательском интерфейсе
Выше вы видели, как императивно реализовать форму. Чтобы лучше понять, как мыслить в React, вы перейдете к повторной реализации этого пользовательского интерфейса в React ниже:
-Определите различные визуальные состояния вашего компонента
-Определите, что вызывает эти изменения состояния
-Представляет состояние в памяти с помощью useState
-Удалите все несущественные переменные состояния
-Подключите обработчики событий, чтобы установить состояние
Ссылка на полный источник: https://react.dev/learn/reacting-to-input-with-state#how-declarative-ui-compares-to-imperative
