Как React синхронизирует состояние DOM?

React синхронизирует DOM с состоянием по принципу «UI = f(state)»: любое изменение данных запускает цикл «рендер → дифф → точечный коммит», приводящий DOM в соответствие новому состоянию.

Цикл синхронизации

setState → render (новое описание UI) → reconciliation (что отличается?)
        → commit (правки DOM) → DOM соответствует состоянию

• Разработчик не синхронизирует DOM вручную — описывает желаемый вид для текущего состояния.
• React вычисляет разницу между «как должно быть» и «как было» и вносит только её.
• Обновления батчатся: несколько setState — один цикл; DOM не проходит через промежуточные состояния.

Направление синхронизации — одностороннее

React считает источником правды своё дерево, а не DOM: он не читает DOM, чтобы «узнать изменения», а перезаписывает управляемые им атрибуты при каждом обновлении. Отсюда:

• ручные мутации React-управляемых узлов (jQuery, innerHTML) будут перезатёрты или сломают дифф;
• для полей форм есть выбор: управляемые (value из state — DOM подчинён состоянию) или неуправляемые (DOM хранит значение сам, React читает по требованию через ref).

Что сохраняется при синхронизации

Благодаря переиспользованию узлов (тот же тип/key — тот же DOM-элемент) браузерное состояние узлов — фокус, позиция курсора, скролл, воспроизведение видео — переживает обновления: React меняет атрибуты, а не пересоздаёт элементы.

Обратная связь из DOM

Когда данные рождаются в DOM (события ввода, размеры), React получает их через события (onChange) и refs/эффекты — и заносит в state, замыкая цикл.

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

Синхронизация одностороння: состояние — источник правды; на каждое изменение React рендерит новое описание UI, диффом находит отличия и точечно правит DOM (батчируя обновления и переиспользуя узлы — фокус/скролл сохраняются). Данные из DOM возвращаются в state через события и refs, ручные мутации React-узлов запрещены.