---
title: JSX и Virtual DOM
seo:
  title: JSX и Virtual DOM — React Developer
  description: "Тема «JSX и Virtual DOM» для собеседования React Developer. Что такое JSX? Что такое Virtual DOM, и как он работает?"
---

[Все темы React Developer](/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)
   :::

---

## <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. [Как работает Virtual DOM в React](https://habr.com/ru/companies/macloud/articles/558682/)
   :::