Компоненты

Простыми словами

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

Компонент — обычная функция, возвращающая DOM. Она выполняется ровно один раз на каждое появление в дереве — это конструктор живого поддерева, а не функция рендера.

function Greeting(props: { name: State<string> }) {
  return <p>Привет, {props.name}!</p>;
}

Нет ни инстанса, ни объекта жизненного цикла, ни повторных вызовов. Всё, что компонент настроил — привязки, подписки, таймеры, — живёт до уничтожения его поддерева (см. Владение).

Пропсы

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

• меняется во времени → принимайте State<T>;
• фиксировано на всю жизнь поддерева → принимайте просто T.

function Price(props: { amount: State<number>; currency: string }) {
  return (
    <span>
      {props.amount.map((a) => a.toFixed(2))} {props.currency}
    </span>
  );
}

Механизма «пропсы изменились» нет: если родитель хочет менять то, что показывает ребёнок, он передаёт ему State. Деструктурировать пропсы безопасно — это обычные значения.

Дети

children — всё, что JSX туда положил: узлы, строки, States, массивы или функция (render prop), если компоненту так удобнее:

function Card(props: { title: string; children?: Child }) {
  return (
    <section class="card">
      <h3>{props.title}</h3>
      {props.children}
    </section>
  );
}

Элементы — это значения

JSX немедленно вычисляется в настоящие DOM-узлы. Паттерны, требующие ref в React, здесь тривиальны:

const input = (<input />) as HTMLInputElement;
onMount(() => input.focus());
return <form>{input}</form>;

Для элементов глубоко в JSX есть ref={fn} / ref={obj} — срабатывает при создании.

Никаких правил

Ничего не перезапускается, поэтому хелперы компонентов — обычные функции. Создавайте состояние в условии, в цикле, на уровне модуля (модульные свёртки вроде accum оборачивайте в root() — состоянию нужен владелец, см. Владение); выносите «кастомные хуки» как функции, возвращающие States/Streams — без правил порядка и линт-плагинов.

---

Незнакомый термин? Вся терминология этой документации объяснена в глоссарии.