Состояние и события

Содержание и основные понятия

Состояние - минимальный набор данных, который меняется во времени. Событие сообщает о действии, обработчик обновляет состояние, затем представление показывает актуальное значение.
событийная модель
DOM API
state → render
01
Один замкнутый цикл
Событие
Пользователь действует
click
, ввод текста, изменение флажка и нажатие клавиши приходят от браузера.
Состояние
Данные меняются
Обработчик изменяет число, строку или признак. Важно хранить данные отдельно от нарисованной подписи.
Отрисовка
DOM отражает данные
Текст, значение поля и доступность кнопки пересчитываются по текущему состоянию.
state = {"count": 0}
# click «+» → state["count"] += 1
# render(state) → на экране новое число
02
Проверь цепочку
Каждая кнопка ниже вызывает отдельное событие. Журнал показывает порядок: событие, новое состояние, обновлённое представление.
Счётчик состояния
реальный click
0
03
Границы ответственности
PyUI описывает безопасное дерево компонентов, которое host превращает в DOM. Отдельный браузерный обработчик получает
click
,
input
или
change
, обновляет данные и меняет представление. Это честнее, чем выдавать макет окна за настольную библиотеку.
Сначала определи, какие данные должны пережить одно действие пользователя.
Назови событие:
click
,
input
или
change
.
После изменения данных покажи пользователю понятный результат.