При использовании createPortal React монтирует дочерний элемент в указанный DOM-узел вне иерархии текущего компонента, но с точки зрения Virtual DOM этот элемент остаётся частью того же React-дерева.
Что произойдёт с Virtual DOM, если использовать createPortal для монтирования элемента в соседний div-контейнер?
При использовании createPortal React монтирует дочерний элемент в указанный DOM-узел вне иерархии текущего компонента, но с точки зрения Virtual DOM этот элемент остаётся частью того же React-дерева.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Условие
Что произойдёт с Virtual DOM, если использовать createPortal для монтирования элемента в соседний div-контейнер?
Ответ
При использовании createPortal React монтирует дочерний элемент в указанный DOM-узел вне иерархии текущего компонента, но с точки зрения Virtual DOM этот элемент остаётся частью того же React-дерева.
Это значит, что:
- Virtual DOM продолжает отслеживать состояние и обновления портала как обычно.
- Обновления React-компонентов, рендерящихся через портал, происходят в рамках единого Virtual DOM.
- Портал позволяет визуально разместить элемент в другом месте DOM, но логически он связан с родительским компонентом.
Например, если у вас есть модальное окно, которое нужно отрисовать в корне документа (<div id="modal-root">), вы можете использовать портал, чтобы поместить его туда, при этом React будет управлять его состоянием и обновлениями как обычно.
Таким образом, Virtual DOM не «теряет» элемент, он просто рендерит его в другом месте реального DOM, сохраняя связь с React-деревом.