virtual dom react что это
Что такое Virtual DOM?
За последний год я много слышал о Virtual DOM и React JS.
React работает действительно быстро и очень прост, но как он работает? Что такое Virtual DOM? Почему я должен беспокоиться об этом, и что случилось со старым добрым обычным DOM?
Что такое DOM
Перед тем, как мы начнем вникать в то, что из себя представляет DOM виртуальный, давайте немного поговорим о том, чем является DOM реальный.
DOM (аббревиатура от Document Object Model) — способ представления структурного документа с помощью объектов. Это кроссплатформенное и языко-независимое соглашение для представления и взаимодействия с данными в HTML, XML и т.д.
Веб-браузеры обрабатывают составляющие DOM, и мы можем взаимодействовать с ними, используя JavaScript и CSS. Мы можем работать с узлами документа, изменять их данные, удалять и вставлять новые узлы. В наши дни DOM API является практически кроссплатформенным и кроссбраузерным.
Так в чем же проблема?
Проблема DOM
Главная проблема DOM — он никогда не был рассчитан для создания динамического пользовательского интерфейса (UI). Мы можем работать с ним, используя JavaScript и библиотеки наподобие jQuery, но их использование не решает проблем с производительностью.
Посмотрите на современные социальные сети, такие как Twitter, Facebook или Pinterest.
После небольшого скроллинга, мы будем иметь десятки тысяч DOM-узлов, эффективно взаимодействовать с которыми — задача не из легких.
Для примера, попробуйте переместить 1000 div-блоков на 5 пикселей влево.
Это может занять больше секунды — это слишком много для современного интернета. Вы можете оптимизировать скрипт и использовать некоторые приемы, но в итоге это вызовет лишь головную боль при работе с огромными страницами и динамическим UI.
Можем ли мы решить эту проблему? Похоже, что можем.
В настоящее время W3C работает над новым стандартом Shadow DOM.
Shadow DOM — это рабочий черновик стандарта W3C. Спецификация, описывающая метод объединения нескольких DOM-деревьев в одну иерархию и как эти деревья взаимодействуют друг с другом в пределах документа, что позволяет лучше скомпоновать DOM.
Другой вариант заключается в использовании подхода с Virtual DOM.
Virtual DOM не является стандартом и в конечном итоге мы по-прежнему взаимодействуем с DOM, но делаем это как можно реже и более эффективно.
Virtual DOM
Вместо того, чтобы взаимодействовать с DOM напрямую, мы работаем с его легковесной копией. Мы можем вносить изменения в копию, исходя из наших потребностей, а после этого применять изменения к реальному DOM.
При этом происходит сравнение DOM-дерева с его виртуальной копией, определяется разница и запускается перерисовка того, что было изменено.
Такой подход работает быстрее, потому как не включает в себя все тяжеловесные части реального DOM.
Но только если мы делаем это правильно. Есть две проблемы: когда именно делать повторную перерисовку DOM и как это сделать эффективно.
React JS
React JS — это JavaScript-библиотека, разработанная в Facebook для создания пользовательских интерфейсов, которая популяризировала идею использования виртуального DOM. React создает легковесное дерево из JavaScript-объектов для имитации DOM-дерева. Затем он создает из них HTML, который вставляется или добавляется к нужному DOM-элементу, что вызывает перерисовку страницы в браузере.
React — это библиотека, а не фреймворк, поэтому сравнивать его с Angular или Ember некорректно.
Другие библиотеки и фреймворки
Вывод
Virtual DOM — это техника и набор библиотек / алгоритмов, которые позволяют нам улучшить производительность на клиентской стороне, избегая прямой работы с DOM путем работы с легким JavaScript-объектом, имитирующем DOM-дерево.
Идея с использованием виртуального DOM отличная, хотя и не нова — мы давно знали, что прямая работа с DOM обходится дорого. Используя библиотеки наподобие React, мы можем повысить производительность приложений и сделать это очень просто.
Dec 28, 2016 · 8 min read
Virtual DOM (VDOM ака VNode) — это волшебный инструмент ✨ который достаточно сложен в понимании. React, Preact и похожие JS библиотеки используют его в своём “ядре”.
К сожалению, я не смог найти хорошую статью или документацию которая смогла бы объяснить принцип работы VDOM простым языком. Так что, я написал её сам.
Получилась ОЧЕНЬ объёмная статья, за счёт большого количества картинок (не текста, всё в порядке).
Все примеры написаны на Preact, но я думаю, что большинство концепций применимы и к React.
Для лучшего понимания VDOM мы пройдёмся по нескольким сценариям:
Краткое обозначение:
📢 — emoji помечает текст где присутствуют ссылки на исходный код.
Реальный DOM — это обычный DOM.
Приложение
Наше приложение — это простое поле поиска которое фильтрует список городов на основе введенных символов. Оно содержит 2 компонента “FilteredList” и “List”. Компонент List отвечает за рендеринг списка элементов (по умолчанию: “California” и “New York”).
От JSX к DOM
Всё довольно просто. Компоненты написанные на JSX (HTML и JS) преобразуются в чистый JS с помощью CLI инструмента Babel. После чего функция “h” (hyperscript) в Preact преобразует их в VDOM дерево (так называемый VNode). И наконец, Preact’s VDOM алгоритм создает реальный DOM из VDOM (наше приложение).
Не волнуйтесь, сейчас мы всё разберём!
Перед тем, как попасть в волшебную страну под названием VDOM, давайте узнаем побольше о JSX.
1. Babel и JSX
JSX позволяет нам писать HTML в JavaScript! А также даёт возможность использовать в нём JS (правда в фигурных скобках <>).
Виртуальный DOM
Во время моего раннего путешествия в React я наткнулся на концепцию «виртуального DOM» и был довольно озадачен. Я понял, что во время изучения HTML, CSS и Javascript был «DOM», но что за черт был виртуальный DOM и зачем он нам нужен в React?
Прежде чем мы углубимся в эту тему, лучше всего вернуться к исходному DOM, или объектной модели документа.
По сути, это означает, что DOM является абстрактным структурным представлением всех «узлов» или элементов в HTML-документе. Поскольку DOM представляет собой представление HTML-кода в памяти, он предоставляет интерфейс для языка сценариев, такого как Javascript, для взаимодействия с каждым узлом в документе HTML и управления им.
Ну, это звучит потрясающе. Зачем нам что-то еще?
Это отличный вопрос! Я думал о том же самом. Чтобы ответить на этот вопрос, давайте еще немного углубимся в структуру DOM.
Когда HTML DOM рендерится, он имеет древовидную структуру. Это полезно для нас как разработчиков, потому что мы можем довольно легко пройти через дерево. Однако легко не значит быстро. Давайте не будем забывать, что эти DOM-деревья в наше время становятся все больше и больше, с бесконечными div-объектами и многочисленными методами, которые обрабатывают события и т. Д. Кроме того, из-за древовидной структуры DOM любые изменения на верхнем уровне могут вызвать огромные колебания в нашем пользовательском интерфейсе ( UI). Обширные манипуляции с DOM сильно влияют на производительность, могут снизить общую производительность вашего приложения и даже могут привести к неприятным ощущениям. Это создает проблему в нашей способности эффективно управлять всеми частями нашего кода.
Вот тут и появляется «виртуальный DOM».
Непосредственное управление DOM может инициировать изменения макета, модификации дерева и повторную визуализацию каждый раз, когда что-то изменяется. Например, если вы внесете изменения в 50 узлов один за другим, у вас будет 50 потенциальных пересчетов макета, 50 потенциальных модификаций дерева и 50 потенциальных повторных рендерингов. Определенно не то, что звучит эффективно.
Так как же нам помогает виртуальный DOM?
Поскольку React создает дерево пользовательских объектов, представляющих часть DOM, он может изменять эти объекты, не касаясь реального DOM. Например, когда мы хотим создать элемент div, содержащий элемент ul, React вместо этого создаст объект React.div, в котором есть объект React.ul. Затем мы можем очень быстро манипулировать этими объектами, не касаясь реального DOM.
Например, если мы внесем изменение в один элемент в нашем списке, React обновит только этот конкретный элемент и оставит остальную часть нашего списка без изменений. Затем он примет эти изменения и выполнит пакетное обновление для реального DOM, чтобы мы могли повторно отобразить новые изменения в нашем пользовательском интерфейсе.
Это здорово, потому что React только обновляет необходимые разделы DOM, сокращая наши изменения до реального DOM. Из-за этого время, потраченное на обновление DOM, сводится к минимуму, а производительность нашего браузера увеличивается. Этот метод выделяет React как высокопроизводительную библиотеку JavaScript и является отличным инструментом, который мы можем использовать как разработчики.
Что такое Virtual DOM?
Недавно я писал о том, что такое DOM и shadow DOM и чем они отличаются друг от друга. Напомним, что Document Object Model (Объектная Модель Документа) — это объектное представление HTML документа и интерфейс для управления этим объектом. Shadow DOM можно рассматривать как «облегченную» версию DOM. Это также объектно-ориентированное представление элементов HTML, но Shadow DOM позволяет нам разделить основной DOM на меньшие изолированные части, которые можно использовать в документах HTML.
Другой похожий термин, с которым вы, возможно, сталкивались, это «Virtual DOM». Хотя эта концепция существует уже несколько лет, она стала более популярной благодаря использованию ее в различных фреймворках, таких как React, Vuejs и т.д.. В этой статье я расскажу, что такое виртуальный DOM, чем он отличается от обычного DOM и как он используется.
Зачем нам нужен virtual DOM?
Чтобы понять, почему возникла концепция виртуального DOM, давайте вернемся к DOM. Как я уже упоминал, в DOM есть две части — объектное представление документа HTML и API для управления этим объектом.
Например, давайте возьмем в качестве примера простой HTML-документ с неупорядоченным списком и одним элементом списка.
Этот документ может быть представлен как следующее DOM дерево:
Допустим, мы хотим изменить содержимое первого элемента списка на «List item one», а также добавить второй элемент списка. Для этого нам нужно будет использовать API DOM, чтобы найти элементы, которые мы хотим обновить, создать новые элементы, добавить атрибуты и контент, а затем, наконец, обновить сами элементы DOM.
DOM не был сделан для этого …
Когда в 1998 году была выпущена первая спецификация для DOM, мы создавали и управляли веб-страницами по-другому. API DOM использовался для создания и обновления содержимого страниц гораздо реже, чем это делается сегодня.
Простые методы, такие как document.getElementsByClassName() подходят для небольшого количества изменений, но если мы обновляем несколько элементов на странице каждые несколько секунд, это может стать очень дорогостоящим, чтобы постоянно запрашивать и обновлять DOM.
Более того, из-за способа настройки API-интерфейсов обычно проще выполнять более дорогостоящие операции, когда мы обновляем большие части документа, чем находить и обновлять конкретные элементы. Возвращаясь к нашему примеру со списком, в некотором смысле проще заменить весь неупорядоченный список новым, чем модифицировать определенные элементы.
В этом конкретном примере разница в производительности между методами, вероятно, незначительна. Однако по мере роста размера веб-страницы становится все более важным выбирать и обновлять только то, что необходимо.
… но причем здесь виртуальный DOM!
Виртуальный DOM был создан для решения этих проблем, связанных с необходимостью частого обновления DOM более производительным способом. В отличие от DOM или shadow DOM, виртуальный DOM не является официальной спецификацией, а представляет собой новый метод взаимодействия с DOM.
Виртуальный DOM может рассматриваться как копия исходного DOM. Этой копией можно часто манипулировать и обновлять, не используя API DOM. После того как все обновления были внесены в виртуальный DOM, мы можем посмотреть, какие конкретные изменения необходимо внести в исходный DOM, и сделать их целевым и оптимизированным способом.
Как выглядит виртуальный DOM?
Слово виртуальный имеет тенденцию добавлять определеную загадочность там где ее на самом деле нет. Фактически, виртуальный DOM — это просто обычный объект Javascript.
Давайте вернемся к дереву DOM, которое мы создали ранее:
Дерево может быть представлено как объект Javascript.
Мы можем думать об этом объекте как о нашем виртуальном DOM. Как и исходный DOM, это объектное представление нашего HTML-документа. Но так как это простой объект Javascript, мы можем свободно и часто манипулировать им, не касаясь реального DOM, пока нам это не понадобится.
Вместо того, чтобы использовать один объект для всего объекта, более распространенной является работа с небольшими разделами виртуального DOM. Например, мы можем работать с компонентом списка, который будет привязан к нашему неупорядоченному элементу списка.
Как работает виртуальный DOM
Теперь, когда мы увидели, как выглядит виртуальный DOM, как он работает для решения проблем производительности и удобства использования DOM?
Как я уже упоминал, мы можем использовать виртуальный DOM, чтобы выделить конкретные изменения, которые необходимо внести в DOM, и сделать эти конкретные обновления по отдельности. Давайте вернемся к нашему неупорядоченному списку и внесем те же изменения, что и в DOM API.
Первое, что мы сделаем, это сделаем копию виртуального DOM, содержащего изменения, которые мы хотим сделать. Поскольку нам не нужно использовать API DOM, мы фактически можем просто создать новый объект полностью.
Эта копия используется для создания того, что называется «diff» между исходным и виртуальным DOM, в данном случае исходным списком, и обновленным списком. Diff может выглядеть примерно так:
В этом разделе приведены инструкции по обновлению фактического DOM. Как только все различия собраны, мы можем пакетно вносить изменения в DOM, делая только необходимые обновления.
Например, мы могли бы перебрать каждый diff и добавить нового потомка или обновить старого в зависимости от того, что указано в diff.
Обратите внимание, что это действительно упрощенная версия того, как реально работает виртуальный DOM, и есть много случаев, которые я здесь не описал.
Виртуальный DOM и фреймворки
В реальности с виртуальным DOM чаще работают через фреймворки, а не взаимодействуют с ним напрямую, как я показал в примере выше.
Фреймворки, такие как React и Vue, используют концепцию виртуального DOM для более производительных обновлений DOM. Например, наш компонент списка может быть написан в React следующим образом.
Поскольку React использует виртуальный DOM, даже если мы перерисовываем весь шаблон, обновляются только те части, которые действительно изменяются. Если мы посмотрим на наши инструменты разработчика, когда произойдут изменения, мы увидим конкретные элементы и конкретные части элементов, которые меняются.
DOM против virtual DOM
Напомним, что виртуальный DOM — это инструмент, который позволяет нам взаимодействовать с элементами DOM более простым и производительным способом. Это Javascript-объектное представление DOM, которое мы можем изменять так часто, как нам нужно. Изменения, внесенные в этот объект, затем сопоставляются, а изменения в реальном DOM производятся намного реже.
Полное руководство по виртуальной DOM React
Дата публикации: 2021-06-16
От автора: борьба с бесполезными манипуляциями с DOM, согласование и алгоритм различий.
Реальная DOM
Перво-наперво, DOM означает «объектную модель документа». Простыми словами DOM представляет пользовательский интерфейс вашего приложения. Каждый раз, когда происходит изменение состояния пользовательского интерфейса вашего приложения, DOM обновляется, чтобы представить это изменение. Теперь загвоздка заключается в том, что частые манипуляции с DOM влияют на производительность, делая ее медленной.
Что замедляет манипуляции с DOM?
Модель DOM представлена в виде древовидной структуры данных. Из-за этого изменения и обновления в DOM происходят быстро. Но после изменения обновленный элемент и его дочерние элементы должны быть повторно отрисованы, чтобы обновить пользовательский интерфейс приложения. Повторный рендеринг или перерисовка пользовательского интерфейса — вот что делает его медленным. Следовательно, чем больше у вас компонентов пользовательского интерфейса, тем дороже могут быть обновления DOM, поскольку их нужно будет повторно отображать при каждом обновлении DOM.
Манипуляции с DOM — это сердце современного интерактивного Интернета. К сожалению, это также намного медленнее, чем большинство операций JavaScript. Эта медлительность усугубляется тем фактом, что большинство фреймворков JavaScript обновляют DOM гораздо чаще, чем необходимо.
В качестве примера предположим, что у вас есть список из десяти элементов. Вы отмечаете первый пункт. Большинство фреймворков JavaScript перестраивают весь список. Это в десять раз больше работы, чем необходимо! Изменился только один элемент, а остальные девять будут восстановлены точно такими же, как и раньше.
Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения
Перестроение списка не представляет большого труда для веб-браузера, но современные веб-сайты могут использовать огромное количество манипуляций с DOM. Неэффективное обновление стало серьезной проблемой. Чтобы решить эту проблему, люди которые работают с React популяризировали нечто, называемое виртуальным DOM.
Виртуальная DOM
В React для каждого объекта DOM существует соответствующий «виртуальный объект DOM». Виртуальный объект DOM — это представление объекта DOM, подобно его облегченной копии. Виртуальный объект DOM имеет те же свойства, что и реальный объект DOM, но у него нет реальной возможности напрямую изменять то, что отображается на экране.
«Виртуальная модель DOM (VDOM) — это концепция программирования, в которой идеальное или «виртуальное» представление пользовательского интерфейса хранится в памяти и синхронизируется с« реальной » библиотекой DOM, такой как ReactDOM. Этот процесс называется согласованием».
Манипулирование DOM происходит медленно. Управление виртуальным DOM происходит намного быстрее, потому что на экране ничего не отображается. Думайте о манипулировании виртуальной DOM как о редактировании чертежа, а не о перемещении комнат в реальном доме.
Как виртуальный DOM работает быстрее?
Когда в пользовательский интерфейс добавляются новые элементы, создается виртуальная модель DOM, представленная в виде дерева. Каждый элемент является узлом в этом дереве. Если состояние любого из этих элементов изменяется, создается новое виртуальное дерево DOM. Затем это дерево сравнивается с предыдущим виртуальным деревом DOM.
Как только это будет сделано, виртуальная DOM вычисляет наилучший из возможных методов внесения этих изменений в реальную DOM. Это гарантирует минимальное количество операций с реальной DOM. Следовательно, снижение стоимости обновления реальной модели DOM.
На изображении ниже показано виртуальное дерево DOM и процесс сравнения.
Красные кружки представляют собой узлы, которые изменились. Эти узлы представляют элементы пользовательского интерфейса, состояние которых было изменено. Затем вычисляется разница между предыдущей версией виртуального дерева DOM и текущим виртуальным деревом DOM. Затем все родительское поддерево повторно визуализируется для получения обновленного пользовательского интерфейса. Это обновленное дерево затем пакетно обновляется до реальной модели DOM.
Как React использует виртуальную модель DOM?
Теперь, когда у вас есть четкое представление о том, что такое виртуальная модель DOM и как она может повысить производительность вашего приложения, давайте посмотрим, как React использует виртуальную модель DOM.
1. React следует шаблону наблюдателю и отслеживает изменения состояния.
В React каждая часть пользовательского интерфейса является компонентом, и каждый компонент имеет состояние. Когда состояние компонента изменяется, React обновляет виртуальное дерево DOM. После обновления виртуальной DOM, React сравнивает текущую версию виртуальной DOM с предыдущей версией виртуальной DOM. Этот процесс называется «дифференцированием».
Как только React узнает, какие виртуальные объекты DOM были изменены, он обновляет только эти объекты в реальной DOM. Это значительно повышает производительность по сравнению с непосредственным манипулированием реальной DOM. Это выделяет React как высокопроизводительную библиотеку JavaScript.
2. React следует механизму пакетного обновления для обновления реальной DOM.
Следовательно — приводит к увеличению производительности. Это означает, что обновления реальной модели DOM отправляются пакетами вместо отправки обновлений для каждого отдельного изменения состояния.
Перекраска пользовательского интерфейса — самая дорогостоящая часть, и React гарантирует, что реальный DOM получает только пакетные обновления для перерисовки пользовательского интерфейса.
3. React следует эффективному алгоритму различий.
React реализует эвристический алгоритм O (n), основанный на двух предположениях:
Два элемента разных типов будут давать разные деревья.
Разработчик может установить, какие дочерние элементы могут быть стабильными при разных рендерингах с помощью свойства key.
На практике эти предположения верны почти для всех случаев использования. При рассмотрении двух деревьев React сначала сравнивает два корневых элемента. Поведение различается в зависимости от типов корневых элементов.
Элементы разных типов
Всякий раз, когда корневые элементы имеют разные типы, React удаляет старое дерево и строит новое дерево с нуля.
При удалении дерева старые узлы DOM уничтожаются. Экземпляры компонентов получают состояние componentWillUnmount(). При построении нового дерева новые узлы DOM вставляются в DOM. Экземпляры компонентов получают состояние UNSAFE_componentWillMount() а затем componentDidMount(). Любое состояние, связанное со старым деревом, теряется.
Любые компоненты ниже корневого также будут размонтированы, и их состояние будет уничтожено. Пример, для сравнения:
Это уничтожит старый Counter и перемонтирует новый.
Элементы одного типа
При сравнении двух элементов React DOM одного типа React смотрит на атрибуты обоих, сохраняет один и тот же базовый узел DOM и обновляет только измененные атрибуты. Например:
Сравнивая эти два элемента, React знает, что нужно изменять только базовый узел className. При обновлении style, React также знает, что нужно обновлять только те свойства, которые изменились. Например:
При преобразовании между этими двумя элементами React знает, что нужно изменять только стиль color, а не fontWeight. После обработки узла DOM React рекурсивно обращается к дочерним элементам.
Рекурсия по дочерним элементам
По умолчанию при рекурсии по дочерним элементам узла DOM, React просто выполняет итерацию по обоим спискам дочерних элементов одновременно и генерирует мутацию всякий раз, когда есть разница. Например, при добавлении элемента в конце дочерних элементов преобразование между этими двумя деревьями работает хорошо:
Если вы реализуете это без Virtual DOM, вставка элемента в начале имеет худшую производительность. Например, преобразование между этими двумя деревьями работает плохо:
Использование ключей
Чтобы решить эту проблему, React поддерживает атрибут key. Когда у потомков есть ключи, React использует ключ для сопоставления их в исходном дереве с потомками в последующем дереве. Например, добавление key к нашему неэффективному примеру выше может сделать преобразование дерева эффективным:
Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения
Теперь React знает, что элемент с ключом ’2014′ является новым, а элементы с ключами ’2015′ и ’2016′ только переместились.
На практике найти ключ обычно не сложно. Элемент, который вы собираетесь отображать, может уже иметь уникальный идентификатор, поэтому ключ может быть просто получен из ваших данных:
Если это не так, вы можете добавить новое свойство ID в свою модель или хешировать некоторые части контента для генерации ключа. Ключ должен быть уникальным только среди своих братьев и сестер, а не глобально.
В крайнем случае вы можете передать индекс элемента в массиве в качестве ключа. Это может сработать, если элементы никогда не переупорядочиваются, но переупорядочивание будет медленным.
Изменение порядка также может вызвать проблемы с состоянием компонента, когда индексы используются в качестве ключей. Экземпляры компонентов обновляются и повторно используются в зависимости от их ключа. Если ключ является индексом, перемещение элемента изменяет его. В результате состояние компонентов для таких вещей, как неконтролируемые вводы, может смешиваться и обновляться неожиданным образом.
Проще говоря: «Вы сообщаете React, в каком состоянии вы хотите, чтобы находился пользовательский интерфейс, и он гарантирует, что DOM соответствует этому состоянию. Большим преимуществом здесь является то, что вам как разработчику не нужно знать, как делать манипуляции с атрибутами, обработку событий или ручное обновление DOM за кулисами».
Все эти детали абстрагируются от разработчиков React. Все, что вам нужно сделать, это обновить состояния вашего компонента по мере необходимости, а React позаботится обо всем остальном. Это обеспечивает превосходную производительность разработчика при использовании React.
Поскольку «виртуальный DOM» — это скорее шаблон, чем конкретная технология, люди иногда говорят, что это означает разные вещи. В мире React термин «виртуальный DOM» обычно ассоциируется с элементами React, поскольку они являются объектами, представляющими пользовательский интерфейс. Однако React также использует внутренние объекты, называемые «волокнами», для хранения дополнительной информации о дереве компонентов. Их также можно рассматривать как часть реализации «виртуальной DOM» в React. Fiber — это новый механизм согласования в React 16. Его основная цель — включить инкрементный рендеринг виртуальной DOM.
Как выглядит виртуальная модель DOM?
Название «виртуальный DOM», как правило, добавляет загадочности тому, что это за концепция на самом деле. Фактически, виртуальная модель DOM — это просто обычный объект Javascript. Вернемся к дереву DOM, которое мы создали ранее:
Это дерево также может быть представлено как объект Javascript.