JSX и Virtual DOM

Все темы React Developer

Что такое JSX?

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

JSX позволяет вставлять JavaScript-выражения внутри тегов, заключая их в фигурные скобки. Например:

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

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

JSX также позволяет описывать пользовательские компоненты в виде элементов, что делает код более структурированным и удобочитаемым:

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

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

Что такое Virtual DOM, и как он работает?

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

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

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

1. Создание виртуального DOM: При изменении состояния приложения React создает виртуальное представление DOM-структуры, которая является легковесной копией реального DOM.

2. Сравнение виртуального DOM: React сравнивает предыдущее состояние виртуального DOM с новым состоянием, выявляя, какие части интерфейса были изменены.

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

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

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

Как Fiber разделяет render phase и commit phase?

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