Hyperscript и JSX синтаксис

Mithril — лёгкий и современный JavaScript-фреймворк для построения одностраничных приложений. Основная сила Mithril заключается в его виртуальном DOM и простом, но гибком синтаксисе создания компонентов. Важнейшей частью этого процесса является использование Hyperscript или JSX для описания структуры интерфейса.

Hyperscript

Hyperscript в Mithril — это функция m(), которая создаёт виртуальные DOM-узлы. Общий синтаксис выглядит так:

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

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

m('div', { class: 'container' }, 'Привет, Mithril!')

Создаёт <div class="container">Привет, Mithril!</div>.

m('ul', 
  m('li', 'Элемент 1'),
  m('li', 'Элемент 2'),
  m('li', 'Элемент 3')
)

Дочерние элементы можно передавать как массив:

m('ul', [
  m('li', 'Элемент A'),
  m('li', 'Элемент B'),
  m('li', 'Элемент C')
])

Особенности Hyperscript в Mithril:

  • Атрибуты DOM могут содержать события (onclick, oninput) и классы через class или className.
  • Можно использовать вложенные компоненты:
const Item = {
  view: (vnode) => m('li', vnode.attrs.text)
};

m('ul', [
  m(Item, { text: 'Первый' }),
  m(Item, { text: 'Второй' })
])
  • Поддержка ключей для оптимизации обновления списка:
m('ul', [
  m('li', { key: 1 }, 'Элемент 1'),
  m('li', { key: 2 }, 'Элемент 2')
])

JSX

JSX в Mithril — это синтаксис, напоминающий HTML, который компилируется в вызовы функции m(). Чтобы использовать JSX, необходимо подключить Babel с плагином для трансформации JSX в вызовы m(). Конфигурация обычно выглядит так:

{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", { "pragma":"m" }]
  ]
}

Пример компонента на JSX:

const List = {
  view: () => (
    <ul class="list">
      <li>Элемент 1</li>
      <li>Элемент 2</li>
      <li>Элемент 3</li>
    </ul>
  )
};

JSX автоматически преобразует вложенные элементы в массивы виртуальных DOM-узлов, аналогично Hyperscript. Атрибуты и события передаются через обычные свойства:

<button oncl ick={() => alert('Клик!')}>Нажми меня</button>

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

  • Читаемость кода выше при сложных деревьях элементов.
  • Возможность писать компоненты в привычной HTML-подобной структуре.
  • Легче интегрировать динамический контент через фигурные скобки {}.

Сравнение Hyperscript и JSX

Особенность Hyperscript JSX
Синтаксис m(‘tag’, attrs, children) children
Читаемость Менее визуальна Похожа на HTML, легче воспринимается
Динамические элементы Передаются через массивы Используется фигурная скобка {}
Поддержка событий Через onclick, oninput Через аналогичные атрибуты JSX
Ключи для списков key в attrs key в атрибуте компонента

Динамический контент и условия

В Hyperscript и JSX можно создавать динамические элементы:

Hyperscript:

m('ul', items.map(item => m('li', { key: item.id }, item.name)))

JSX:

<ul>
  {items.map(item => <li key={item.id}>{item.name}</li>)}
</ul>

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

m('div', condition ? 'Да' : 'Нет')
<div>{condition ? 'Да' : 'Нет'}</div>

Вложенные компоненты и композиция

Mithril позволяет строить компоненты как функции или объекты с методом view:

const Button = {
  view: (vnode) => m('button', { onclick: vnode.attrs.onClick }, vnode.attrs.label)
};

const App = {
  view: () => m('div', [
    m(Button, { label: 'Кнопка 1', onClick: () => alert(1) }),
    m(Button, { label: 'Кнопка 2', onClick: () => alert(2) })
  ])
};

На JSX это выглядит ещё чище:

const App = () => (
  <div>
    <Button label="Кнопка 1" onCl ick={() => alert(1)} />
    <Button label="Кнопка 2" onCl ick={() => alert(2)} />
  </div>
);

Стилизация и классы

В Hyperscript атрибут class передаётся как строка или как объект для условных классов:

m('div', { class: isActive ? 'active' : '' })

В JSX синтаксис схож:

<div class={isActive ? 'active' : ''}></div>

Hyperscript и JSX в Mithril предоставляют гибкие и мощные инструменты для построения интерфейсов. Hyperscript хорош для компактного, программного создания DOM-узлов, JSX — для удобной визуализации структуры компонентов и более читаемого кода в сложных проектах. Их использование напрямую влияет на стиль разработки и удобство поддержки кода в масштабных приложениях.

Оглавление