Что происходит с Virtual DOM при использовании createPortal для монтирования элемента в другой DOM-контейнер?

Как Virtual DOM работает с createPortal

В React Virtual DOM — это абстрактное представление пользовательского интерфейса, которое не зависит от реальной DOM-структуры. Когда вы используете createPortal, вы указываете React, что определённый элемент должен быть смонтирован в другой DOM-контейнер, но в Virtual DOM он остаётся частью родительского компонента.

Пример кода

import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(
    <div className="modal">{children}</div>,
    document.getElementById('modal-root')
  );
}

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <Modal>
        <p>This is in a portal</p>
      </Modal>
    </div>
  );
}

В этом примере Modal рендерится в #modal-root, но в Virtual DOM он остаётся дочерним элементом App. React управляет обновлениями портала через свой алгоритм сравнения (reconciliation), который работает на уровне Virtual DOM, а не реального DOM.

Ключевые аспекты

• Virtual DOM не меняет свою иерархию при использовании порталов — портал остаётся частью родительского компонента в дереве Virtual DOM.
• React обновляет портал так же, как и обычные элементы: при изменении состояния или пропсов он перерисовывает только необходимые части.
• События и контекст React (например, Context API) работают через Virtual DOM, поэтому портал может получать контекст от родительского компонента, даже если физически находится в другом месте DOM.

Вывод

createPortal — это мощный инструмент для рендеринга модальных окон, тултипов или других элементов вне основного потока DOM, при этом Virtual DOM сохраняет логическую структуру приложения, что упрощает управление состоянием и событиями.