Виртуальная DOM и механизм рендеринга

Hyperapp использует виртуальную DOM (Virtual DOM, VDOM) как центральный механизм для управления интерфейсом. Виртуальная DOM представляет собой лёгкую абстракцию над реальной DOM, позволяя описывать структуру интерфейса с помощью обычных JavaScript-объектов. Основная цель — минимизировать количество операций с реальной DOM, которые являются дорогими с точки зрения производительности браузера.

Структура виртуальной DOM

Элемент виртуальной DOM в Hyperapp описывается объектом с ключевыми свойствами:

  • tag — строка с именем HTML-тега или компонент;
  • props — объект со свойствами элемента (атрибуты, события);
  • children — массив дочерних элементов, которые могут быть строками, числами или другими виртуальными элементами.

Пример описания виртуального узла:

const vnode = {
  tag: "div",
  props: { id: "container", onclick: () => console.log("clicked") },
  children: [
    { tag: "h1", props: {}, children: ["Заголовок"] },
    { tag: "p", props: {}, children: ["Текст абзаца"] }
  ]
};

Каждый виртуальный узел является неизменяемым объектом. Изменения интерфейса происходят через создание нового VDOM и последующее сравнение с предыдущей версией.

Рендеринг и diffing

Механизм рендеринга в Hyperapp состоит из двух основных этапов:

  1. Создание виртуальной DOM-структуры на основе функции view.
  2. Сравнение нового VDOM с предыдущим и обновление реальной DOM только там, где это необходимо.

Сравнение называется diffing. Алгоритм diffing:

  • Сначала сравниваются корневые узлы. Если tag изменился, узел заменяется полностью.
  • Если tag совпадает, происходит сравнение props. Новые свойства добавляются, удаляются старые, изменённые обновляются.
  • Дочерние элементы сравниваются рекурсивно. Строковые или числовые узлы обновляются напрямую, объекты сравниваются по тем же правилам.

Пример использования:

import { app } from "https://unpkg.com/hyperapp"

const state = { count: 0 }

const actions = {
  increment: () => state => ({ count: state.count + 1 }),
}

const view = (state, actions) => (
  h("div", {}, [
    h("h1", {}, `Счётчик: ${state.count}`),
    h("button", { onclick: actions.increment }, "Увеличить")
  ])
)

app({ init: state, view, actions })

При каждом вызове actions.increment Hyperapp создаёт новый VDOM и вычисляет минимальный набор изменений, чтобы обновить DOM. Это обеспечивает высокую производительность даже при больших интерфейсах.

Обновление свойств и событий

Hyperapp отслеживает изменения свойств и событий в props. Алгоритм обновления:

  • Атрибуты HTML обновляются только при изменении значения.
  • События добавляются через функцию-обёртку, позволяющую автоматически связывать их с текущим состоянием.
  • Если свойство удаляется из нового VDOM, оно также удаляется из реального DOM.

Пример изменения текста и обработчика события:

h("button", { onclick: () => alert("Новое действие") }, "Новая кнопка")

Эффективность Virtual DOM

Использование виртуальной DOM снижает количество операций с реальной DOM, что критично при изменении больших деревьев элементов. Основные преимущества:

  • Минимизация перерисовок: обновляются только изменённые узлы.
  • Предсказуемость состояния: каждая функция view возвращает новый VDOM на основе текущего состояния.
  • Упрощение разработки: интерфейс описывается декларативно, без прямых манипуляций с DOM.

Заключение по рендерингу

Механизм виртуальной DOM в Hyperapp объединяет декларативный подход к интерфейсу с эффективным алгоритмом обновления. Рендеринг строится на создании новых виртуальных узлов, сравнении их с предыдущими и минимальном наборе изменений в реальной DOM. Такой подход обеспечивает высокую скорость работы приложений и позволяет сосредоточиться на описании логики интерфейса, а не на ручном управлении элементами страницы.

Оглавление