Начнём с того, что такое DOM (Document Object Model) и как React взаимодействует с DOM.
Изменение состояния
В любом Web-приложении HTML-документ представляется в виде дерева.
На изображении выше представлен пример HTML-страницы и того, как она может быть представлена в браузере.
Когда DOM уже сформирован и загружен в веб-браузер, то обновление всего DOM – это затратная операция. Особенно, если необходимо обновить весь DOM, перерисовать все элементы HTML-страницы.
При использовании React для создания веб-приложений нет необходимости при любом действии пользователя перерисовывать абсолютно весь DOM.
У React есть так называемый виртуальный DOM, который существует параллельно с реальным DOM.
Виртуальный DOM – это объект JavaScript.
React при любом действии пользователя прежде чем изменять реальный DOM, который загружен в браузер, изменяет сначала состояние в виртуальном DOM.
Две версии виртуального DOM
В React, если можно так сказать, существуют две версии виртуального DOM: текущее состояние и предыдущее состояние.
Он сравнивает текущее состояние виртуального DOM с предыдущим состоянием виртуального DOM, а именно сравнивает все элементы, которые изменились.
Все эти манипуляции в React выполняются с помощью JavaScript, т.е. реальный DOM пока никак не затронут.
Определение отличий и внесений изменений
После определения изменений в виртуальном DOM, React вносит изменения уже в реальный DOM, но производит это «точечно», т.е. меняет только те элементы, которые изменились в виртуальном DOM.
Не происходит полная перерисовка DOM страницы.
После внесения изменений реальный и виртуальный DOM полностью синхронизированы.