Как React вносит правки в Real DOM?

Правки в реальный DOM React вносит в commit-фазе: после того как рендер и дифф вычислили точный список изменений, они применяются к DOM синхронно и одним пакетом.

Откуда берётся список правок

• Render-фаза: компоненты вызваны, построено новое дерево, reconciliation сравнил его со старым.
• Для каждого затронутого узла зафиксирован эффект: вставить, удалить, переместить, обновить свойства.

Какие операции выполняются

• Создание: document.createElement для новых узлов, установка атрибутов/свойств, appendChild/insertBefore в правильную позицию.
• Обновление: точечные правки существующих узлов — className, style (по отдельным полям), textContent, value; меняются только отличающиеся атрибуты, узел не пересоздаётся.
• Перемещение: insertBefore для переставленных элементов списка (по key React знает, что узел тот же).
• Удаление: removeChild + размонтирование поддерева (cleanup эффектов, отсоединение refs).

Свойства процесса

• Синхронность и атомарность: commit не прерывается (в отличие от render-фазы) — пользователь не увидит «полуобновлённый» UI.
• Батчинг: все правки одного обновления — одним куском; браузер пересчитывает layout один раз.
• Минимальность: НЕ innerHTML и не пересоздание поддеревьев — хирургические операции по списку диффа; поэтому сохраняются фокус, выделение, позиция скролла.
• Сразу после правок: обновляются refs, синхронно выполняется useLayoutEffect, затем браузер рисует кадр, после — useEffect.

Коротко для собеседования

React применяет изменения в commit-фазе: по списку из диффа выполняются точечные операции (createElement/insertBefore/removeChild, обновление отдельных атрибутов и текста) — синхронно, пакетно, без пересоздания узлов. Затем refs → useLayoutEffect → отрисовка → useEffect.