|
|
@@ -0,0 +1,19 @@
|
|
|
+## Лекция 1: Декларативный рендеринг: от шаблонов к Virtual DOM и реактивным системам
|
|
|
+
|
|
|
+**Декларативный рендеринг представляет собой парадигму описания пользовательского интерфейса**, при которой разработчик определяет *каким должен быть UI в конкретный момент времени* в зависимости от состояния приложения, а не предписывает последовательность команд для его изменения (императивный подход). Современные фреймворки (React, Vue, Svelte) реализуют эту парадигму через абстракцию **Virtual DOM** или компиляцию, что позволяет автоматически и эффективно синхронизировать фактический DOM с изменяющимся состоянием.
|
|
|
+
|
|
|
+
|
|
|
+*Ключевые слова для поиска изображения: declarative vs imperative UI, Virtual DOM diffing process*
|
|
|
+
|
|
|
+Ключевым инженерным вызовом является **эффективный расчет разницы (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)`. Это **позволяет** четко разделять бизнес-логику (преобразование состояния) и логику представления (отображение), что упрощает тестирование и рассуждения о поведении приложения. Компоненты становятся идемпотентными по отношению к своим пропсам и состоянию.
|
|
|
+
|
|
|
+Таким образом, декларативный рендеринг — это **не просто синтаксический сахар, а фундаментальный сдвиг в модели разработки интерфейсов**, переносящий фокус с механизмов обновления на проектирование потока данных и их трансформации в визуальное представление.
|
