Виртуальный DOM
Во время моего раннего путешествия в React я наткнулся на концепцию «виртуального DOM» и был довольно озадачен. Я понял, что во время изучения HTML, CSS и Javascript был «DOM», но что за черт был виртуальный DOM и зачем он нам нужен в React?
Прежде чем мы углубимся в эту тему, лучше всего вернуться к исходному DOM, или объектной модели документа.
Согласно MDN ,
«Объектная модель документа (DOM) - это программный интерфейс для документов HTML и XML. Он представляет страницу, так что программы могут изменять структуру документа, стиль и содержание. DOM представляет документ в виде узлов и объектов. Таким образом, языки программирования могут подключаться к странице.
Веб-страница - это документ. Этот документ может отображаться либо в окне браузера, либо как источник HTML. Но это один и тот же документ в обоих случаях. Объектная модель документа (DOM) представляет тот же документ, поэтому им можно манипулировать. DOM - это объектно-ориентированное представление веб-страницы, которое можно изменить с помощью языка сценариев, такого как JavaScript ».
По сути, это означает, что DOM является абстрактным структурным представлением всех «узлов» или элементов в HTML-документе. Поскольку DOM представляет собой представление HTML-кода в памяти, он предоставляет интерфейс для языка сценариев, такого как Javascript, для взаимодействия с каждым узлом в документе HTML и управления им.
Ну, это звучит потрясающе. Зачем нам что-то еще?
Это отличный вопрос! Я думал о том же самом. Чтобы ответить на этот вопрос, давайте еще немного углубимся в структуру DOM.
Когда HTML DOM рендерится, он имеет древовидную структуру. Это полезно для нас как разработчиков, потому что мы можем довольно легко пройти через дерево. Однако легко не значит быстро. Давайте не будем забывать, что эти DOM-деревья в наше время становятся все больше и больше, с бесконечными div-объектами и многочисленными методами, которые обрабатывают события и т. Д. Кроме того, из-за древовидной структуры DOM любые изменения на верхнем уровне могут вызвать огромные колебания в нашем пользовательском интерфейсе ( UI). Обширные манипуляции с DOM сильно влияют на производительность, могут снизить общую производительность вашего приложения и даже могут привести к неприятным ощущениям. Это создает проблему в нашей способности эффективно управлять всеми частями нашего кода.
Вот тут и появляется «виртуальный DOM».
Виртуальный DOM - это абстракция HTML DOM, которая не привязана к какому-либо конкретному браузеру. Этот метод не был создан React, но его использование было очень популярно в React. Вы можете представить себе виртуальный DOM, как локальный снимок React реального DOM, который является более простым и легким - это буквально «виртуальное» представление реального DOM. Он имеет все те же атрибуты, что и DOM, но не имеет возможности напрямую изменять то, что отображается на экране, до обновления реального DOM. Это позволяет React взять абстрагированную копию и изменить ее без использования каких-либо реальных операций DOM, которые обычно выполняются очень медленно.
Непосредственное управление DOM может инициировать изменения макета, модификации дерева и повторную визуализацию каждый раз, когда что-то изменяется. Например, если вы внесете изменения в 50 узлов один за другим, у вас будет 50 потенциальных пересчетов макета, 50 потенциальных модификаций дерева и 50 потенциальных повторных рендерингов. Определенно не то, что звучит эффективно.
Так как же нам помогает виртуальный DOM?
Поскольку React создает дерево пользовательских объектов, представляющих часть DOM, он может изменять эти объекты, не касаясь реального DOM. Например, когда мы хотим создать элемент div, содержащий элемент ul, React вместо этого создаст объект React.div, в котором есть объект React.ul. Затем мы можем очень быстро манипулировать этими объектами, не касаясь реального DOM.
Когда мы действительно хотим визуализировать недавно измененные компоненты, React будет использовать два виртуальных DOM - один с обновленным состоянием, а другой с предыдущим состоянием до внесения каких-либо новых изменений. Затем React будет использовать эти 2 виртуальных DOM дерева, чтобы выяснить, какие конкретные части необходимо обновить, чтобы два дерева соответствовали друг другу в алгоритмическом процессе, называемом «дифференцированием». Как только он обнаружит, какие виртуальные объекты DOM были изменены, он обновит только эти объекты в реальном DOM.
Например, если мы внесем изменение в один элемент в нашем списке, React обновит только этот конкретный элемент и оставит остальную часть нашего списка без изменений. Затем он примет эти изменения и выполнит пакетное обновление для реального DOM, чтобы мы могли повторно отобразить новые изменения в нашем пользовательском интерфейсе.
Это здорово, потому что React только обновляет необходимые разделы DOM, сокращая наши изменения до реального DOM. Из-за этого время, потраченное на обновление DOM, сводится к минимуму, а производительность нашего браузера увеличивается. Этот метод выделяет React как высокопроизводительную библиотеку JavaScript и является отличным инструментом, который мы можем использовать как разработчики.
