Что происходит с jsx при рендере?

Преобразование JSX при рендере

JSX (JavaScript XML) — это синтаксическое расширение JavaScript, используемое преимущественно в React для описания структуры UI. При рендере JSX проходит несколько этапов преобразования, ключевым из которых является **трансформация в JavaScript объекты**, понятные React.

Этапы обработки JSX

1. Трансформация в JavaScript код (Babel/TypeScript)

JSX не является валидным JavaScript. Поэтому перед выполнением код должен быть преобразован. Это делается инструментами типа Babel (с плагином @babel/plugin-transform-react-jsx) или TypeScript.

Пример трансформации:

// Оригинальный JSX
const element = <div className="container">Hello</div>;

После трансформации Babel (для React 17+ с автоматическим импортом):

// Результат трансформации
import { jsx as _jsx } from 'react/jsx-runtime';
const element = _jsx("div", {
  className: "container",
  children: "Hello"
});

Для версий React до 17:

// Результат трансформации (React.createElement)
const element = React.createElement(
  "div",
  { className: "container" },
  "Hello"
);

2. Создание React элементов (Virtual DOM узлы)

Функция React.createElement или jsx() возвращает React элемент — легковесный объект, описывающий DOM-структуру.

Структура React элемента:

// Внутренняя структура объекта (пример)
const element = {
  $$typeof: Symbol.for('react.element'),
  type: "div",
  key: null,
  ref: null,
  props: {
    className: "container",
    children: "Hello"
  },
  // Другие внутренние поля React
};

Ключевые свойства:

• type: тип элемента (строка для DOM элементов, функция/класс для компонентов)
• props: объект свойств, включая children
• $$typeof: внутренний символ React для безопасности

3. Рендер в DOM (Reconciliation)

После создания React элементов начинается процесс рендера:

Для начального рендера:

• React передает дерево элементов в реconciliation алгоритм
• Алгоритм сравнивает элементы, определяет изменения
• Генерируется инструкции для реального DOM через React DOM (для web)

Для повторных рендеров:

• Создается новое дерево элементов
• Diffing алгоритм сравнивает новое и предыдущее дерево
• Определяются минимальные необходимые изменения DOM
• Применяются только эти изменения (оптимизация производительности)

Особенности обработки

Динамические выражения в JSX

Любое выражение внутри {} вычисляется и становится частью props:

const name = "World";
const element = <div>Hello {name}</div>;

// Трансформируется в:
const element = React.createElement("div", null, "Hello ", name);

Компоненты как типы

Если type является функцией или классом, React вызывает его для получения элемента:

const Welcome = () => <h1>Welcome</h1>;
const element = <Welcome />;

// Трансформируется в:
const element = React.createElement(Welcome, null);

Подводя итог

При рендере JSX:

1. Трансформируется в вызовы React.createElement() или jsx() через Babel/TS
2. Создает React элементы — объекты виртуального DOM
3. Передается в reconciliation engine React для сравнения и вычисления диффа
4. Обновляет реальный DOM минимально необходимыми изменениями

Этот процесс позволяет React обеспечивать высокую производительность благодаря виртуальному DOM и оптимизированным алгоритмам сравнения, сохраняя при этом декларативность разработки UI через JSX.