---
title: JSX и Virtual DOM
questionDates:
  q-transfer-0434: '2026-10-01'
seo:
  description: >-
    Тема «JSX и Virtual DOM» для собеседования React Developer. Что такое JSX?
    Что такое Virtual DOM, и как он работает?
  title: JSX и Virtual DOM — React Developer
---

[Все темы React Developer](/prep/react-developer)

## <strong>Что такое</strong> <code>JSX</code><strong>?</strong> [#q-14bee738d69b81efbe4bc4aff0a36749]

<code>JSX</code> (JavaScript XML) - это расширение синтаксиса JavaScript,
используемое в React для описания структуры пользовательского интерфейса. Этот
синтаксис позволяет объединять код JavaScript и HTML-подобные элементы в одном
месте, что делает создание компонентов React более интуитивным и читаемым.

<code>JSX</code> позволяет вставлять JavaScript-выражения внутри тегов, заключая
их в фигурные скобки. Например&#58;

```jsx
const name = "John";
const element = <h1>Hello, {name}</h1>;
```

В данном примере переменная <code>name</code> вставлена внутри JSX-элемента с помощью фигурных скобок.

<code>JSX</code> также позволяет описывать пользовательские компоненты в виде
элементов, что делает код более структурированным и удобочитаемым&#58;

```jsx
function Greeting(props) {
  return <p>Hello, {props.name}!</p>;
}
```

<code>JSX</code>-код должен быть преобразован в обычный JavaScript-код перед
тем, как он будет выполнен в браузере. Для этого используются инструменты
компиляции, обычно включенные в сборочный процесс проекта на React.

:::note[Ссылки для изучения]

1. [Знакомство с JSX](https://ru.legacy.reactjs.org/docs/introducing-jsx.html)
2. [JSX и React.createElement. Ulbi TV, с 16:08](https://www.youtube.com/watch?v=GNrdg3PzpJQ&t=968s)

:::

---

## <strong>Что такое</strong> <code>Virtual DOM</code><strong>, и как он работает?</strong> [#q-14bee738d69b81508735e57ac1b8db7e]

Virtual DOM (виртуальное DOM) - это концепция, используемая в библиотеках и фреймворках, таких как React, для оптимизации обновлений реального DOM (Document Object Model) и повышения производительности веб-приложений.

Реальный DOM - это представление структуры веб-страницы в браузере в виде дерева объектов. Когда состояние приложения меняется и требуется обновление интерфейса, браузер выполняет изменения непосредственно в реальном DOM. Однако многократные и частые обновления реального DOM могут быть затратными с точки зрения производительности, особенно для больших и сложных интерфейсов.

Виртуальное DOM решает эту проблему следующим образом&#58;

1. <strong>Создание виртуального DOM&#58;</strong> При изменении состояния
   приложения React создает виртуальное представление DOM-структуры, которая
   является легковесной копией реального DOM.

1. <strong>Сравнение виртуального DOM&#58;</strong> React сравнивает предыдущее
   состояние виртуального DOM с новым состоянием, выявляя, какие части
   интерфейса были изменены.

1. Подготовка изменений&#58; React определяет, какие операции с DOM нужны для нового результата рендера. Алгоритм согласования использует эвристики и не гарантирует математически минимальный набор операций.

1. Применение изменений&#58; на стадии commit React выполняет необходимые операции с реальным DOM. Один commit может включать несколько изменений узлов и атрибутов.

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

:::note[Ссылки для изучения]

1. [Виртуальный DOM и согласование в React](https://ru.legacy.reactjs.org/docs/faq-internals.html)
   :::

---

## Как Fiber разделяет render phase и commit phase? [#q-transfer-0434]

В render phase React вычисляет следующее дерево и изменения. Эта работа должна быть чистой: concurrent rendering может прерывать, повторять или отбрасывать вычисление, поэтому здесь нельзя выполнять внешние эффекты. В commit phase React применяет готовые изменения к DOM и запускает связанные lifecycle-эффекты в определённом порядке. Commit для конкретного дерева не прерывается так, как render. Fiber хранит единицы работы и их приоритет, благодаря чему планировщик может уступать браузеру и продолжать позже. Конкретные внутренние детали не являются публичным API; код компонента должен опираться на чистый render и documented hooks.

:::note[Ссылки для изучения]

1. [Рендер и фиксация изменений DOM в React](https://ru.react.dev/learn/render-and-commit)
   :::