Что на самом деле представляет собой Virtual DOM?

Здравствуйте, читатель, недавно я столкнулся с очевидным вопросом от интервьюера: «Что такое Virtual DOM?». Следующие пять минут я объяснял, как это работает и почему это эффективно, но это не отвечало на заданный вопрос. Если вы уже работаете с ReactJS или новичок в нем, вы наверняка столкнулись бы с одним и тем же вопросом тысячу раз, но, к сожалению, не все из нас имеют четкое представление о том, что такое виртуальный дом.

Затем я прочитал пару статей, документацию по ReactJS, просмотрел несколько видеороликов и пришел к пониманию Virtual DOM. Поэтому я постараюсь дать правильное объяснение того, что такое виртуальная модель DOM и как она помогает ускорить рендеринг компонентов.

Что такое DOM?

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

Объектная модель документа (DOM) - это структурированное модельное представление документов HTML и XML. Проще говоря, элементы, присутствующие на веб-странице, можно просматривать в виде дерева, где узлы являются родительскими тегами HTML, а ветви включают их соответствующие дочерние теги.

Рассмотрим этот пример формы, видимой на веб-странице:

DOM этой формы будет выглядеть так:

Да, DOM на самом деле похож на HTML, который должен был быть написан для формы. Тогда чем DOM отличается от любого документа HTML? HTML - это то, что сервер отправляет в ответ на запрос, тогда как DOM создается браузером "поверх" полученного HTML, используя полученный HTML. Ключевым отличием по-прежнему является то, что DOM - это модель документа, имеющая различные API-интерфейсы, с помощью которых мы можем управлять HTML с течением времени.

Что такое Virtual DOM?

Теперь, когда у нас есть понимание DOM, давайте углубимся в мир Virtual DOM.

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

Сейчас мы создадим простой функциональный компонент React и далее вместо его рендеринга мы просто попытаемся вывести его в консоль:

const DummyComponent = ({title}) =>{
    return(
           <div className="container">
                  <h1>{title}</h1>
                  <h3>This is a dummy component</h3>
           </div>
    )
}

console.log(DummyComponent("Calling the dummy component"))

Теперь проверьте, что было выведено в консоли. Был выведен объект, содержащий все детали компонента, который вы только что создали. Посмотрите на объект и его ключи, ключ props содержит дочерние элементы вместе с другими элементами, переданными компоненту. Вот как выглядит виртуальный DOM.

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

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

Как компоненты рендеринга работают с Virtual DOM?

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

В простой манипуляции DOM, допустим, мы хотим обработать событие click для любой кнопки <button id="btn">Click me!</button>, тогда нам сначала нужно получить доступ к этому элементу с помощью getElementById('btn'), этот метод пройдет по всему DOM и найдет элемент с определенным ID, а затем мы можем выполнить манипуляцию с этим DOM-элементом. Этот процесс прост, если мы имеем дело с небольшим количеством элементов, но, допустим, у нас есть приложение для просмотра тенденций фондового рынка, цен на различные акции и соответствующих новостей, теперь в этом приложении у нас тысячи компонентов, данные внутри них могут меняться пару раз в течение секунды, и поэтому обработка этого с помощью простой техники манипулирования DOM может оказаться утомительной и требующей времени задачей. Чтобы преодолеть этот недостаток, React использует Virtual DOM для манипуляций с DOM.

В React каждый компонент следит за своим состоянием и другими параметрами, от которых зависит рендеринг этого компонента. Предположим, что в нашем компоненте происходит изменение состояния и требуется повторный рендеринг компонента, здесь появляется виртуальный DOM и весь процесс, связанный с рендерингом, выглядит следующим образом:

На начальном этапе React сделает снимок реального DOM, существующего в данный момент (DOM, существующий до того, как произойдет ре-рендеринг), и сохранит его в памяти, пока что мы можем называть его Real Virtual DOM.
Теперь React создаст новый виртуальный DOM с нуля, который будет содержать все старые компоненты плюс новые изменения, это означает, что React не знает предыдущий DOM. Он будет рассматривать все его компоненты как новые. Созданный новый виртуальный DOM хранится отдельно от старого виртуального DOM и не вносит никаких изменений в реальный DOM.
На третьем этапе React сравнит оба виртуальных DOM и определит новое изменение, которое должно быть реализовано, и его местоположение. Это сравнение выполняется с помощью "алгоритма диффинга", а сам процесс называется "диффинг". В процессе диффинга многое происходит за кулисами, подробнее об этом вы можете узнать здесь.
Как только изменение будет обнаружено, React удалит старый компонент из реального DOM и нарисует новый компонент на реальном DOM. Этот процесс происходит следующим образом: сначала компонент, который должен быть удален, получает метод жизненного цикла componentWillUnmount(), который удаляет его, после чего новый компонент, который должен быть отрисован, получает componentWillMount() и componentDidMount(), который выводит новый компонент на фронтенд. Этот процесс синхронизации виртуального DOM с реальным DOM называется Reconciliation.

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

Итак, все можно свести к одной фразе - виртуальный DOM помогает React в рендеринге компонентов. Если я что-то упустил или вы хотите что-то добавить, пожалуйста, оставьте свой ценный отзыв. Также, если есть что-то, о чем вы хотели бы, чтобы я написал в будущем, пожалуйста, дайте мне знать.

Источник: https://dev.to/akanshsaxena/what-actually-is-virtual-dom-1b12