Интерполяция значений

Haunted — это лёгкая библиотека для создания веб-компонентов на базе Web Components и функционального подхода, основанного на хуках. Один из ключевых аспектов разработки с Haunted — это управление состоянием и эффективная реактивная отрисовка. Интерполяция значений играет центральную роль в динамическом обновлении интерфейса, связывая состояние компонента с его представлением.

Основы интерполяции

В Haunted данные из состояния компонента интегрируются в разметку через шаблонные литералы и специальные директивы. Например:

import { html, render } from 'haunted';

const Counter = () => {
  const [count, setCount] = useState(0);

  return html`
    <div>Текущее значение: ${count}</div>
    <button @click=${() => setCount(count + 1)}>Увеличить</button>
  `;
};

customElements.define('my-counter', haunted(Counter));

Здесь ${count} — это простейшая форма интерполяции. Любое изменение состояния count автоматически приведёт к повторной отрисовке этого фрагмента.

Интерполяция выражений

В Haunted можно использовать не только переменные, но и выражения:

html`<div>${count % 2 === 0 ? 'Чётное' : 'Нечётное'}</div>`;

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

Интерполяция атрибутов

Особое внимание стоит уделить связыванию данных с атрибутами элементов. Стандартная синтаксис ${} внутри строки атрибута не всегда обеспечивает реактивность, поэтому Haunted использует специальные подходы:

html`<input .value=${inputValue} @input=${e => setInputValue(e.target.value)} />`
  • .value=${inputValue} — связывание свойства элемента, а не HTML-атрибута. Это обеспечивает корректное обновление значения input.
  • @input=${...} — привязка событий с использованием декларативного синтаксиса Haunted.

Использование свойств элементов вместо атрибутов важно для элементов, которые управляют внутренним состоянием, таких как <input>, <textarea>, <select>.

Интерполяция массивов и списков

Haunted позволяет динамически рендерить коллекции данных с помощью интерполяции массивов:

const items = ['Яблоко', 'Банан', 'Вишня'];

html`
  <ul>
    ${items.map(item => html`<li>${item}</li>`)}
  </ul>
`;
  • Метод map() возвращает массив шаблонов `html```, который Haunted автоматически объединяет и рендерит.
  • Изменения массива потребуют создания нового массива, так как Haunted отслеживает ссылки на объекты для оптимизации повторной отрисовки.

Интерполяция вложенных компонентов

Можно использовать интерполяцию для включения других веб-компонентов:

const ItemComponent = ({ name }) => html`<span>${name}</span>`;
customElements.define('item-component', haunted(ItemComponent));

html`
  <div>
    ${items.map(item => html`<item-component .name=${item}></item-component>`)}
  </div>
`;

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

Динамическая интерполяция стилей

Интерполяция применяется не только к контенту и атрибутам, но и к стилям:

const isActive = true;

html`<div style=${`color: ${isActive ? 'green' : 'red'};`}>Статус</div>`;
  • Можно комбинировать условную логику с динамическими стилями.
  • Для сложных случаев рекомендуется использовать классы и директивы Haunted, чтобы минимизировать прямую работу со строками CSS.

Интерполяция с хуками

Haunted строится вокруг хуков, таких как useState и useEffect. Интерполяция напрямую зависит от состояния:

const Timer = () => {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setTime(t => t + 1), 1000);
    return () => clearInterval(id);
  }, []);

  return html`<div>Прошло секунд: ${time}</div>`;
};

customElements.define('my-timer', haunted(Timer));
  • Любое изменение time автоматически обновляет DOM в месте интерполяции.
  • Интерполяция работает синхронно с хуками состояния, обеспечивая точное отображение текущих данных.

Оптимизация интерполяции

Для больших приложений рекомендуется:

  1. Минимизировать количество вложенных выражений в шаблоне, чтобы ускорить рендеринг.
  2. Использовать директивы Haunted, такие как repeat, для больших массивов вместо стандартного map().
  3. Избегать ненужного пересоздания объектов, так как Haunted использует ссылочную проверку для обновления DOM.

Итоговые принципы

  • Интерполяция связывает состояние и представление через шаблонные литералы и директивы.
  • Она охватывает контент, атрибуты, свойства, стили и дочерние компоненты.
  • Эффективная интерполяция в Haunted минимизирует ручное управление DOM и обеспечивает реактивность интерфейса.

Эти возможности делают Haunted мощным инструментом для построения динамических, модульных и реактивных веб-компонентов на чистом JavaScript.

Оглавление