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

SkateJS — это легковесная библиотека для создания веб-компонентов на базе стандарта Custom Elements и Shadow DOM. Одной из ключевых особенностей является реактивное управление состоянием компонента, что позволяет эффективно реализовывать условный рендеринг элементов на странице.

В SkateJS условный рендеринг строится на базе свойств (props) компонента и функции render, которая возвращает структуру DOM, обычно используя JSX или шаблонные функции.

Свойства компонента и реактивность

Каждое свойство, определенное в компоненте, может автоматически отслеживаться библиотекой. Пример объявления свойства:

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

class MyComponent extends Component {
  static props = {
    isVisible: props.boolean
  };

  renderCallback() {
    return this.isVisible ? <p>Элемент видим</p> : null;
  }
}

define('my-component', MyComponent);

props.boolean — определяет булево свойство, изменения которого автоматически вызывают повторный рендер.
renderCallback — функция, которая возвращает JSX, определяющий текущий вид компонента.

Использование тернарного оператора внутри renderCallback — один из базовых способов условного рендеринга.

Условный рендеринг нескольких блоков

Для сложных условий можно использовать многократные ветвления:

renderCallback() {
  if (!this.isVisible) {
    return <p>Элемент скрыт</p>;
  }

  switch (this.status) {
    case 'loading':
      return <p>Загрузка...</p>;
    case 'success':
      return <p>Данные успешно загружены</p>;
    case 'error':
      return <p>Произошла ошибка</p>;
    default:
      return <p>Неизвестный статус</p>;
  }
}

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

Использование массивов и условных элементов

Для условного отображения списков часто используется комбинация массивов и фильтрации:

renderCallback() {
  const items = this.items || [];
  return (
    <ul>
      {items
        .filter(item => item.visible)
        .map(item => <li>{item.text}</li>)
      }
    </ul>
  );
}

Такой подход позволяет динамически изменять содержимое списка без полного перерендера всего компонента.
SkateJS эффективно обновляет только изменившиеся элементы DOM.

Вложенные условия и составные компоненты

Условный рендеринг может быть вложенным, что полезно при создании сложных интерфейсов:

renderCallback() {
  return (
    <div>
      {this.isAuthenticated ? (
        <div>
          <p>Добро пожаловать!</p>
          {this.hasNotifications && <p>У вас есть новые уведомления</p>}
        </div>
      ) : (
        <p>Пожалуйста, войдите в систему</p>
      )}
    </div>
  );
}

Логические операторы && позволяют добавлять блоки только при истинности условия.
Вложенные блоки можно разделять на отдельные методы или дочерние компоненты для улучшения читаемости.

Динамическая подгрузка компонентов

SkateJS поддерживает динамический рендер дочерних компонентов на основе условий:

renderCallback() {
  return (
    <div>
      {this.showChart ? <chart-component data={this.data} /> : null}
    </div>
  );
}

Подгружаемый компонент рендерится только при необходимости.
Это позволяет оптимизировать производительность и уменьшить нагрузку на браузер.

Взаимодействие с атрибутами и классами

Условный рендеринг может распространяться не только на контент, но и на классы CSS или атрибуты элементов:

renderCallback() {
  return (
    <button
      class={this.isActive ? 'active' : 'inactive'}
      disabled={!this.isEnabled}
    >
      Кнопка
    </button>
  );
}

Атрибуты class и disabled изменяются динамически.
SkateJS следит за реактивностью и автоматически обновляет DOM при изменении свойств.