Элементы и их свойства

Preact — это легковесный фреймворк для создания пользовательских интерфейсов, совместимый с концепциями React, но оптимизированный по размеру и скорости. Основная единица интерфейса в Preact — элемент, который описывает, что должно быть отрисовано на экране. Элемент в Preact является объектом с определённой структурой, обычно создаваемым с помощью JSX или функции h().

Создание элементов

В Preact элементы создаются двумя основными способами:

  1. JSX
const element = <div class="container">Привет, Preact!</div>;

JSX компилируется в вызовы функции h(), которая создаёт виртуальный DOM элемент.

  1. Функция h()
import { h } from 'preact';

const element = h('div', { class: 'container' }, 'Привет, Preact!');

Первый аргумент — тип элемента (строка для HTML-элементов или компонент), второй — объект свойств (props), третий и последующие — дочерние элементы.

Свойства элементов (props)

Props — это объект, содержащий свойства, передаваемые компоненту или элементу. Они определяют внешний вид и поведение элемента. Например:

const Button = ({ text, onClick }) => {
  return <button onCl ick={onClick}>{text}</button>;
};

<Button text="Нажми меня" onCl ick={() => alert('Clicked!')} />

Основные особенности props:

  • Неподвижность: Props нельзя изменять внутри компонента; они всегда доступны только для чтения.
  • Динамическое обновление: Изменение props родительского компонента вызывает повторную отрисовку дочернего.
  • Произвольные данные: Props могут содержать любые значения: строки, числа, объекты, функции и даже JSX элементы.

Особенности JSX-атрибутов

В Preact большинство HTML-атрибутов работают как props, но есть отличия:

  • class вместо className
  • for вместо htmlFor
  • События пишутся с маленькой буквы: onclick, oninput, onchange (в отличие от React, где требуется camelCase)
const element = <label for="input">Имя</label>;
const input = <input id="input" oncha nge={() => console.log('Изменено')} />;

Дети элементов (children)

Children — это содержимое элемента, передаваемое через JSX или h():

const Card = ({ children }) => <div class="card">{children}</div>;

<Card>
  <h2>Заголовок</h2>
  <p>Описание карточки</p>
</Card>

Внутри компонента children доступны как массив или одиночный элемент. Это позволяет создавать композицию интерфейса, объединяя элементы внутри контейнера.

Условная отрисовка и массивы элементов

Props и children дают гибкость в управлении контентом. Например, элементы можно рендерить условно:

const UserStatus = ({ isLoggedIn }) => (
  <div>
    {isLoggedIn ? <p>В сети</p> : <p>Не в сети</p>}
  </div>
);

Массив элементов также поддерживается:

const listItems = ['Яблоко', 'Банан', 'Вишня'].map(fruit =>
  <li key={fruit}>{fruit}</li>
);

<ul>{listItems}</ul>

Важно использовать уникальный key при работе с массивами, чтобы Preact мог эффективно обновлять виртуальный DOM.

Различие между элементами и компонентами

  • Элемент — базовая единица, создаётся функцией h() или JSX, описывает, что должно быть отрисовано.
  • Компонент — функция или класс, возвращающий элемент. Компоненты используют props для конфигурации:
function Welcome({ name }) {
  return <h1>Привет, {name}!</h1>;
}

const element = <Welcome name="Алиса" />;

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

Атрибуты специальных типов

  • ref: позволяет получить доступ к DOM-узлу элемента.
import { useRef } from 'preact/hooks';

const inputRef = useRef();
<input ref={inputRef} />;
  • dangerouslySetInnerHTML: вставляет HTML-контент напрямую (небезопасно, если содержимое приходит из ненадёжного источника):
<div dangerouslySetInnerHTML={{ __html: '<strong>Bold</strong>' }} />
  • style: принимает объект с CSS-свойствами:
<div style={{ color: 'red', fontSize: '16px' }}>Текст</div>

Итоговая структура элемента

Каждый элемент в Preact можно представить как объект с ключевыми свойствами:

  • type — строка (HTML) или компонент
  • props — объект с атрибутами и children
  • key — уникальный идентификатор для массивов элементов
  • ref — ссылка на DOM-узел или компонент

Эта структура позволяет Preact эффективно создавать виртуальный DOM, отслеживать изменения и обновлять реальный DOM с минимальными затратами.

Оглавление