Что такое виртуальный DOM?

Виртуальный DOM (VDOM) — это концепция программирования, в которой идеальная или «виртуальная» версия пользовательского интерфейса (UI) хранится в памяти и синхронизируется с «реальным» DOM через библиотеку, такую ​​как ReactDOM. Это известно как примирение.

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

Как на самом деле работает виртуальный DOM?

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

Исходное состояние DOM:

<div>
         <div>
               <h1>Hello World</h1>
         </div>
         <div>
               <h1>Hello Universe</h1>
         </div>
</div>

Обновить состояние DOM:

<div>
         <div>
               <h1>Hello World</h1>
         </div>
         <div>
               <h1>Hello Planet</h1>
         </div>
</div>

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

Функциональные аспекты Virtual DOM

Понятно, что производительность, обеспечиваемая Virtual DOM, потрясающая. Мало того, ниже приведены некоторые преимущества Virtual DOM:

  1. Повышение скорости и производительности
  2. Легкий
  3. Это просто и понятно
  4. Удивительный алгоритм сравнения
  5. Его можно использовать в других фреймворках, а не только реагировать

Что ж, все, что имеет преимущество, будет иметь и недостаток, давайте рассмотрим недостатки виртуального DOM:

  1. Более высокие проблемы с использованием памяти, поскольку алгоритмы сравнения должны постоянно сравнивать элементы, чтобы знать, какие компоненты необходимо обновить или изменить.
  2. Его нелегко интегрировать во многие другие фреймворки.
  3. Вы не можете использовать его или целевые шаблонизаторы.

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

Какой вывод мы можем сделать?

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

Первоначально опубликовано здесь:



Понимание особенностей виртуальной модели DOM в React
Объектная модель документа (DOM) — сердце современной интерактивной сети. Однако использование простого DOM делает вашу сеть…bit.ly



Ace Infoway с многолетним опытом использует модульную природу React для простоты обслуживания и масштабируемости вашего веб-сайта. Если вам нужно мощное решение для создания быстрого и динамичного веб-сайта для вашего бизнеса, свяжитесь с нами прямо сейчас!