ISRPO/Лекции/Arkhitektura_Sovremennogo_STAKa/FirstLecture.md

Лекция 1: Декларативный рендеринг: от шаблонов к Virtual DOM и реактивным системам

Декларативный рендеринг представляет собой парадигму описания пользовательского интерфейса, при которой разработчик определяет каким должен быть UI в конкретный момент времени в зависимости от состояния приложения, а не предписывает последовательность команд для его изменения (императивный подход). Современные фреймворки (React, Vue, Svelte) реализуют эту парадигму через абстракцию Virtual DOM или компиляцию, что позволяет автоматически и эффективно синхронизировать фактический DOM с изменяющимся состоянием.

Ключевым инженерным вызовом является эффективный расчет разницы (diffing) между состояниями UI. Наивный подход — полная перерисовка при любом изменении состояния — неприемлем для производительности. React и подобные библиотеки используют эвристический алгоритм сравнения двух деревьев Virtual DOM (рекурсивный обход, сравнение по типу элемента и ключу key), чтобы вычислить минимальный набор мутаций для реального DOM. Это преобразует проблему обновления интерфейса из задачи изменения DOM (element.appendChild()) в задачу обновления данных (состояния).

Таблица 1. Сравнение стратегий декларативного рендеринга

Стратегия	Реализация	Механизм синхронизации	Преимущество
Virtual DOM & Reconciliation	React, Preact	Сравнение двух VDOM-деревьев, применение патча к реальному DOM	Абстракция над нативным API, кроссплатформенность (React Native).
Компиляция в императивный код	Svelte, Solid.js	Компилятор на этапе сборки генерирует оптимальный код, точечно обновляющий DOM при изменении реактивных переменных.	Накладные расходы в runtime близки к нулю, отсутствие виртуального DOM.
Тонкая реактивность (Fine-grained Reactivity)	Vue 3, MobX	Использование Proxy для отслеживания зависимостей; при изменении данных вызываются только связанные с ними эффекты (рендер-функции).	Более точный контроль над тем, что и когда пересчитывается.

С архитектурной точки зрения, декларативный подход неразрывно связан с управлением состоянием (state management). UI становится функцией от состояния: UI = f(state). Это позволяет четко разделять бизнес-логику (преобразование состояния) и логику представления (отображение), что упрощает тестирование и рассуждения о поведении приложения. Компоненты становятся идемпотентными по отношению к своим пропсам и состоянию.

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