Почему виртуальный DOM
Манипуляции с DOM - это ключ к представлению интерактивных веб-браузеров, которые работают слишком медленно по той причине, что большинство фреймворков Javascript обновляют DOM больше, чем нужно. Чтобы подробно объяснить, если дерево DOM состоит из шести узлов и изменения вносятся в один узел, все дерево перестраивается, при этом остальные пять узлов восстанавливаются точно так, как они были раньше.
Добавление и удаление узлов DOM занимает не намного больше времени, чем установка свойства для объекта Javascript. Это простая операция. Тогда в чем причина медлительности, макета, который браузеры должны создавать всякий раз, когда изменяется DOM, браузеру необходимо пересчитывать CSS, выполнять макет и перерисовывать веб-страницу. Но когда дело доходит до современных веб-сайтов, которые используют огромное количество манипуляций с DOM, неэффективное обновление становится серьезной проблемой.
Чтобы решить эту проблему, React популяризировал виртуальную модель DOM.
Виртуальный дом
Виртуальный DOM - это виртуальное представление DOM. всякий раз, когда состояние нашего приложения изменяется, обновляется виртуальная DOM вместо реальной DOM. В React методы render () возвращают описание DOM, а React diff это описание с представлением в памяти для вычисления наиболее быстрого способа обновления браузера.
А также React реализует полностью синтетическую систему событий, так что все объекты событий гарантированно соответствуют спецификации W3C, несмотря на причуды браузера, последовательно и эффективно во всех браузерах.
Насколько виртуальная модель DOM работает быстро?
В React каждый раздел пользовательского интерфейса представлен компонентом, и каждый компонент определяется состоянием. всякий раз, когда состояние изменяется, наблюдатель React запускает изменение состояния и обновляет дерево Virtual DOM. После обновления Virtual DOM React сравнивает новую виртуальную DOM с версией до обновления и выясняет, какие именно виртуальные объекты DOM были изменены . Этот процесс называется «diffing ».
Как только React узнает, какие виртуальные объекты DOM были изменены, React обновляет только эти объекты в реальной DOM. Это значительно повышает производительность по сравнению с непосредственным манипулированием реальной DOM. Репутация React как производителя высокой производительности обусловлена этим нововведением.
Как это помогает
Виртуальная модель DOM оптимизирует использование памяти по сравнению с другими системами, поскольку не хранит в памяти наблюдаемые объекты. Таким образом, каждое изменение модели данных может вызвать полное обновление виртуального пользовательского интерфейса.
И это обеспечивает более эффективный способ обновления представления в веб-приложении. Каждый раз, когда в приложении React изменяются базовые данные, создается новое виртуальное представление DOM пользовательского интерфейса. Визуализация виртуальной модели DOM всегда выполняется быстрее, чем визуализация пользовательского интерфейса в реальной модели DOM браузера.
Он также предоставляет простой способ обновления браузера. Это обеспечивает высвобождение значительного объема ресурсов памяти и простую оптимизацию пользовательского интерфейса, что улучшает как производительность, так и продуктивность.
