Все об этом говорят, а вы знаете, что это такое?
Оставайтесь на переднем крае React и TypeScript, следуя за мной в Твиттере по адресу https://twitter.com/antondevv.
Цель этой статьи — рассказать вам немного о DOM, а также о том, чем виртуальный DOM React отличается от него и как они взаимодействуют на высоком уровне.
Во-первых, давайте проясним некоторые вещи:
HTML — это разметка для веб-страницы (например, структура), а JavaScript используется для взаимодействия с веб-страницей.
Когда веб-сайт загружается, файл (HTML) загружается в браузер. JavaScript не может напрямую понять этот HTML-документ — он читается как тарабарщина. И здесь на помощь приходит DOM. DOM — это просто высокоуровневая абстракция HTML-страницы в объектно-ориентированном виде.
Так что же такое DOM?
Это означает Объектная модель документа и представляет собой представление веб-сайта на основе объектов и узлов. По сути, это объектно-ориентированный способ описания веб-сайта, и JavaScript может получать доступ к этим свойствам и управлять ими. Кстати, если вы фронтенд-разработчик и хотите узнать кое-что о DOM, ознакомьтесь с моей статьей об этом здесь.
В любом случае, DOM — это веб-API, который находится в среде выполнения JavaScript, и именно поэтому мы можем получать доступ к DOM и взаимодействовать с ним, поскольку DOM вообще не является частью JavaScript; это просто веб-API, к которому у нас есть доступ в определенных средах выполнения JavaScript, которые предоставляют DOM как веб-API.
Элементы HTML становятся узлами в модели DOM. Помните, что JavaScript не может понимать HTML напрямую, поэтому ему необходимо создать его высокоуровневую абстракцию объектно-ориентированным способом.
Таким образом, DOM как веб-API позволяет нам взаимодействовать с ним с помощью JavaScript. Например, мы можем изменить тег ‹h1›, выполнив следующие действия:
Плохо обновлять DOM
Так почему же обновлять DOM — это плохо?
Прежде всего, это беспорядок, он может довольно быстро стать довольно сложным.
Кроме того, это может быть довольно неэффективно. Браузер должен покрыть синтаксический анализ, вычисление CSS, макетов и т. д. до того, как DOM отобразится на экране. Итак, допустим, мы меняем 50 узлов DOM. Браузер должен сделать все это для каждого узла, и повторный рендеринг будет довольно медленным.
И когда состояния меняются, браузеру нужно выяснить, что нужно перерендерить. Если нужно перерендерить весь DOM или только его часть и т. д.
Например, если бы мы отображали фрагмент HTML каждую секунду с заголовком и с count, который увеличивается на 1 каждую секунду, тогда каждую секунду будет обновляться весь DOM, а не только счетчик. Но с React и использованием виртуального DOM единственное, что будет обновляться в DOM, — это count, и это будет то, что снова будет отображаться на экране. Итак, используя так называемые алгоритмы сравнения, React делает обновление DOM более эффективным.
Что такое виртуальный DOM?
Вот что говорит об этом официальная документация React:
Виртуальный DOM (VDOM) — это концепция программирования, при которой идеальное или «виртуальное» представление пользовательского интерфейса хранится в памяти и синхронизируется с «реальным» DOM.
React предоставляет виртуальный объект DOM для каждого объекта DOM, имеющегося в DOM, который действует как упрощенная копия реального объекта DOM. И это виртуальный DOM, который является не чем иным, как облегченным клоном реального DOM. И у React есть закулисные алгоритмы для эффективного обновления реального DOM с помощью виртуального DOM и наоборот, но как и когда это происходит?
При изменении состояния компонента обновляется весь виртуальный DOM; это может показаться неудобным, но не потому, что виртуальный DOM чрезвычайно легкий и быстрый. Это как обновлять объект только потому, что на экране ничего не нарисовано. Однако, когда ваше приложение расширяется и у вас есть много взаимозависимых компонентов, может быть трудно избежать повторного рендеринга, и это может фактически снизить производительность, особенно если у вас есть дорогостоящее действие, которое запускается при повторном рендеринге компонента. Так что имейте это в виду: это изменение состояния вызывает цепочку повторных рендеров, и это нормально или требует некоторого внимания?
Затем новый виртуальный объект DOM сравнивается с предыдущим до обновления состояния. Затем React определяет, какие виртуальные объекты DOM были изменены (это называется сравнением), и как только он определяет, какие виртуальные объекты DOM были изменены, он обновляет реальный DOM только теми новыми объектами, которые были изменены, используя интеллектуальные и эффективные методы. алгоритмы для обновления DOM с правильными и необходимыми изменениями. Но почему это быстрее, как вы, возможно, слышали?
Потому что, когда в нашем компоненте React происходит изменение состояния, сначала обновляется наша виртуальная DOM, затем она сравнивает ее с предыдущей виртуальной DOM и обновляет только те узлы реальной DOM, которые необходимо обновить, и делает это эффективно. Он также группирует изменения для повышения эффективности. Таким образом, вместо того, чтобы обновлять DOM по одному узлу за раз, он будет обновлять DOM один раз со всеми изменениями.
И если наше веб-приложение большое и мы используем простой JavaScript для обновления DOM, это может быть дорогостоящей процедурой, потому что DOM придется перерисовывать неэффективными способами, не говоря уже о безумной сложности.
Заключение:
Для каждого объекта DOM в DOM у React есть «виртуальный объект DOM», который соответствует ему, например, его облегченная копия.
Поскольку с DOM медленно манипулировать эффективно, манипулирование виртуальным DOM происходит быстрее, дает лучшую производительность и, что наиболее заметно, помогает устранить сложность DOM.
Если вам понравилась эта статья, надеюсь, вам также понравятся:
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.
