Как работает Virtual DOM в React.js

Работая с React вы должны были сталкиваться с термином "Virtual DOM", тут я постараюсь описать что это и как он работает и главное зачем он нужен.

DOM

Дабы отсеять любые непонимание о том что будет объясняться ниже предлагаю вспомнить что же такое DOM.

DOM - Document Object Model, где каждый ваш HTML тег является объектом.

Вся ваша HTML страница, организует дерево или DOM дерево.

<!DOCTYPE HTML>
<html>
<head>
  <title>Пример DOM</title>
</head>
<body>
  Ваша страница тут
</body>
</html>

И так, теперь мы помним что каждый элемент в нашей HTML структуре это объект нашего DOM дерева и добавляю новые элементы нашей верстки мы расширяем эту структуру.

Важно помнить что с помощью просто JavaScript мы можем влиять на наш DOM обратившись к document:

document.body.style.background = 'green';

обращаясь к нашему документу мы можем получать либо изменять его свойства.

Недостаток Физического DOM

Как я упоминал ранее DOM представлен в виде структуры даных дерево, эту структуру данных умеют понимать все браузеры. Благодаря этому изменения и обновления DOM происходят быстро.

Но если вам приходится менять DOM часто, то следовательно его нужно заново отрисовать для пользователя. Вот именно тут и начинается недостаток и дороговизна этого изменения. Чем больше у вас компонентов интерфейса, тем больше дольше и затратнее становится повторная отрисовка пользовательского интерфейса.

Виртуальный DOM

И дабы решить проблему физического DOM на помощь пришла концепция виртуального DOM (Virtual DOM), который решает проблему с повторной отрисовкой пользовательского интерфейса.

Virtual DOM (Виртуальный DOM) - это ничто иное как виртуальное представление того же DOM. А именно когда состояние вашего интерфейса изменится, то обновится виртуальный DOM вместо физического.

Но пока еще не понятно как виртуальный DOM решает проблему с повторной отрисовкой, ведь измененный DOM нужно отрисовать.

Как работает Virtual DOM?

Давайте разберемся как же устроен виртуальный DOM и почему он быстрее чем физический.

Как только новые компоненты добавляются на пользовательский интерфейс, на их основе создается виртуальном DOM, где каждый компонент является узлом в этом DOM дереве.

Если состояние любого из этих компонентов изменится, то создастся новый DOM, затем старое и новое DOM дерево сравнятся на различия. Как только отличия будут найдены, виртуальный DOM вычисляет наилучший метод внесения этих изменений в существующий DOM.

Таким образом виртуальный DOM гарантирует нам минимальное количество операций с реальным DOM и снижение расходов на его обновление.

Давайте я покажу пример ниже как происходит обновление на основе выше сказанного:

https://api.bcode.dev/v1/content/storage/post/100004/a36995c00227434eb59af3dfd8f246c5.png

Красными кружочками отмечены узлы состояние которых было изменено. Далее происходит сравнение и на основе полученной разницы происходит обновление дочерних узлов на основе нового родительского состояния.

На рисунке показан простой пример, в реальности виртуальный дом может принимать решение какие именно дочерние узлы стоит обновить, а какие нет.

Virtual DOM в React

Виртуальный DOM используют многие библиотеки отображение пользовательского интерфейса, но тут мы рассмотрим как его использует React.js

Ранее я уже применял термин компонент и состояние, так вот в React каждая часть пользовательского интерфейса это компонент и каждый из этих компонентов и имеет собственное состояние.

React реализует observable pattern и отслеживает изменения состояния компонента. Когда состояние компонента изменится, React обновит виртуальный DOM и сравнит его с предыдущей версией DOM. Как только React узнает какие виртуальные объекты DOM изменились он обновит только их уже в реальном DOM.

И конечно же вам как разработчику не стоит заботится обо всех этих манипуляция, вы только управляете состоянием ваших компонентов а остальное React сделает сам.

Также важно знать, что каждый компонент будет перерисовываться если его состояние или свойства будут изменены, и чтобы управлять этим процессом корректно следует понимать жизненный цикл React компонента.

Итог

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