Передача данных вниз

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

Свойства компонентов (props)

В Haunted передача данных вниз реализуется через свойства компонентов, которые создаются при помощи функции component. Свойства аналогичны props в React: они позволяют родителю передавать значения в дочерний компонент при рендеринге.

import { html, component } from 'haunted';

function Child({ message }) {
  return html`<p>${message}</p>`;
}

customElements.define('child-element', component(Child));

function Parent() {
  const message = "Привет из родителя!";
  return html`<child-element .message=${message}></child-element>`;
}

customElements.define('parent-element', component(Parent));

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

    • Свойства передаются через .имяСвойства=${значение}.
    • Изменение свойства родителя автоматически инициирует реактивный рендеринг дочернего компонента.
    • Использование точки (.) перед именем свойства гарантирует передачу значения как JavaScript объекта, а не как строки атрибута HTML.

Обработка изменений свойств

Haunted предоставляет возможность реагировать на изменения свойств через useEffect. Это позволяет отслеживать обновления данных и выполнять побочные действия:

import { html, component, useEffect } from 'haunted';

function Child({ count }) {
  useEffect(() => {
    console.log(`Новое значение count: ${count}`);
  }, [count]);

  return html`<p>Count: ${count}</p>`;
}

customElements.define('child-element', component(Child));

  • Пояснения:

    • useEffect вызывается каждый раз при изменении значений в массиве зависимостей.
    • Это обеспечивает реактивное обновление и предотвращает необходимость ручного контроля за обновлением DOM.

Сложные структуры данных

Haunted позволяет передавать объекты, массивы и функции как свойства дочернего компонента:

function Child({ user }) {
  return html`
    <p>Имя: ${user.name}</p>
    <p>Возраст: ${user.age}</p>
  `;
}

function Parent() {
  const user = { name: 'Алексей', age: 30 };
  return html`<child-element .user=${user}></child-element>`;
}

  • Особенности:

    • При передаче объектов и массивов важно помнить о мутабельности. Если объект изменяется без создания нового, Haunted может не заметить обновление. Рекомендуется использовать создание нового объекта при изменении данных:

      user.age = 31; // ❌ может не обновиться
const newUser = { ...user, age: 31 }; // ✅ гарантирует обновление

Передача функций как колбеков

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

function Child({ onClick }) {
  return html`<button @click=${onClick}>Нажми меня</button>`;
}

function Parent() {
  const handleClick = () => console.log('Кнопка нажата в дочернем компоненте');
  return html`<child-element .onCl ick=${handleClick}></child-element>`;
}
  • Функции передаются также через точку (.).
  • Позволяет дочернему компоненту оставаться без состояния, получая все данные и действия извне.

Свойства по умолчанию

Haunted поддерживает значения по умолчанию для свойств, что удобно для обеспечения устойчивости компонента:

function Child({ message = 'Сообщение по умолчанию' }) {
  return html`<p>${message}</p>`;
}
  • Если родитель не передаст значение, компонент автоматически использует значение по умолчанию.
  • Упрощает тестирование и интеграцию компонентов.

Вывод

Передача данных вниз в Haunted строится на свойствах компонентов, которые поддерживают реактивное обновление, сложные структуры и функции. Ключевые принципы:

  • Использование точки при привязке свойства для передачи объектов и функций.
  • Реактивное обновление с помощью useEffect.
  • Передача неизменяемых структур данных для корректного рендеринга.
  • Возможность определения значений по умолчанию для повышения устойчивости компонентов.

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

Оглавление