Функции рендеринга

SkateJS — это современная библиотека для создания веб-компонентов на JavaScript, которая позволяет строить декларативные пользовательские элементы с использованием реактивного подхода. Центральной концепцией в SkateJS является рендеринг, который определяет, как компонент отображает своё состояние в DOM.

Рендеринг в SkateJS основывается на двух ключевых принципах: свойства компонента (props) и реактивное обновление DOM. Каждое изменение свойств автоматически может инициировать перерасчёт отображаемого контента без ручного вмешательства.

Метод render

В SkateJS для определения визуального содержимого компонента используется метод render. Он вызывается библиотекой автоматически при создании компонента и при изменении его свойств.

Пример базового компонента с использованием render:

import { define, Component, h } from 'skatejs';

class MyComponent extends Component {
  static get props() {
    return {
      name: String
    };
  }

  renderCallback() {
    return (
      <div>
        Привет, {this.name}!
      </div>
    );
  }
}

define('my-component', MyComponent);

Ключевые моменты:

  • renderCallback() — метод, который SkateJS вызывает для получения нового состояния DOM.
  • h() — функция для создания виртуальных DOM-элементов (аналог JSX или гипервиртуального DOM).
  • Возвращаемый элемент может быть любым DOM-узлом, включая вложенные компоненты.

Реактивность свойств

SkateJS автоматически отслеживает изменения свойств компонента, заданных в props. При изменении значения свойства выполняется повторный вызов renderCallback, что обновляет DOM без необходимости вручную управлять элементами.

const element = document.createElement('my-component');
element.name = 'Алексей';
document.body.appendChild(element);

// Позже
element.name = 'Мария'; // DOM обновится автоматически

Виртуальный DOM и оптимизация

SkateJS использует легковесный виртуальный DOM для минимизации прямых операций с реальным DOM. Это обеспечивает:

  • Оптимальное обновление: изменяются только необходимые элементы.
  • Минимизацию перерисовки: если структура DOM не изменилась, SkateJS не пересоздаёт узлы.
  • Поддержку сложных вложенных компонентов: обновления проходят рекурсивно, только затрагивая изменившиеся ветви.

Условный рендеринг

Компоненты могут включать условный рендеринг на основе состояния или свойств:

renderCallback() {
  return (
    <div>
      {this.name ? <span>Привет, {this.name}</span> : <span>Имя не указано</span>}
    </div>
  );
}

SkateJS корректно обрабатывает ветвления, сохраняя DOM-узлы, которые не изменились, и удаляя только устаревшие.

Работа с событиями и динамическим контентом

Для добавления обработчиков событий используется синтаксис, аналогичный React:

renderCallback() {
  return (
    <button oncl ick={() => alert(`Привет, ${this.name}`)}>
      Кликни меня
    </button>
  );
}

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

Shadow DOM и изоляция стилей

SkateJS поддерживает использование Shadow DOM для компонентов, обеспечивая изоляцию стилей и предотвращение конфликтов с глобальными CSS:

class ShadowComponent extends Component {
  static get props() { return { text: String }; }

  static get useShadow() { return true; }

  renderCallback() {
    return (
      <p>{this.text}</p>
    );
  }
}
  • useShadow = true создаёт shadow root для компонента.
  • Все стили внутри shadow root применяются только к данному компоненту.
  • Поддержка слотов позволяет интегрировать внешнее содержимое в компоненты без нарушения изоляции.

Обновления и жизненный цикл рендеринга

SkateJS предлагает ряд хук-функций жизненного цикла, которые позволяют управлять рендерингом:

  • connectedCallback() — вызывается при добавлении компонента в DOM.
  • disconnectedCallback() — вызывается при удалении компонента.
  • renderCallback() — возвращает виртуальный DOM для отображения.
  • updatedCallback(prevProps, prevState) — вызывается после обновления свойств или состояния, позволяет выполнять побочные эффекты.

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

updatedCallback(prevProps) {
  if (prevProps.name !== this.name) {
    console.log(`Имя изменилось с ${prevProps.name} на ${this.name}`);
  }
}

Рендеринг вложенных компонентов

SkateJS поддерживает композицию компонентов. Один компонент может включать другие компоненты в renderCallback:

renderCallback() {
  return (
    <div>
      <my-component name={this.name}></my-component>
      <p>Дополнительная информация</p>
    </div>
  );
}
  • Подобная вложенность упрощает создание сложных интерфейсов.
  • Каждый компонент управляет своим собственным состоянием и рендерингом независимо.

Заключение по функциональности рендеринга

Основные возможности рендеринга в SkateJS сводятся к реактивному обновлению DOM через виртуальный DOM, условному отображению, управлению событиями и изоляции стилей с помощью Shadow DOM. Это делает SkateJS мощным инструментом для создания масштабируемых и поддерживаемых веб-компонентов, обеспечивая лёгкий и предсказуемый рендеринг.

Оглавление