Упрощение виртуального DOM в React: руководство для начинающих по пониманию того, как это работает

Что такое объектная модель документа?

Давайте сначала разберемся, что такое DOM? Объектная модель документа также известна как DOM. Это структурированное HTML-представление на веб-странице или в приложении. В виде древовидной структуры данных он представляет собой весь пользовательский интерфейс (пользовательский интерфейс) веб-приложения.

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

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

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

Обновление контента:

Поскольку браузер не понимает теги HTML, мы должны использовать объекты JavaScript для изменения содержимого или стиля. Каждый раз, когда мы изменяем содержимое или стиль, создается новое состояние, соответствующее этому изменению, что приводит к изменению состояния (от начального к конечному) и обновлению DOM (UI).

Проблема с ДОМом:

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

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

Виртуальный дом

Согласно документации React Virtual DOM, или VDOM, — это просто хранящееся в памяти виртуальное представление пользовательского интерфейса, которое синхронизируется с Real DOM.

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

Он имеет те же свойства и процессы, что и Real DOM, но не может напрямую влиять на содержимое, а Real DOM требует больше времени для загрузки или отображения пользовательского интерфейса после модификации, чем VDOM.

Работа с виртуальным DOM

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

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

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

Как только сравнение завершено и React имеет компонент или объект, в котором произошли изменения, обновляется только та часть Real DOM. Это пакетный процесс, а не одноэтапный процесс, в котором все изменения одновременно отправляются в реальный DOM.

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

Пример

Давайте посмотрим на пример, чтобы лучше понять его.

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

Заключение:

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