Прежде чем говорить о разнице между Real DOM и Virtual DOM, в первую очередь я хочу поговорить о том, что означает DOM? Что оно делает?
DOM (объектная модель документа) - это платформа и не зависящий от языка интерфейс, используемый для доступа к объектам в документе и изменения содержимого, стиля и структуры объекта, к которому осуществляется доступ.
Почему виртуальный дом?
Работа с DOM означает постоянное добавление и удаление чего-либо из DOM, то есть изменение элемента в DOM или изменение CSS этого элемента, что может быть для нас довольно дорогостоящим. То, что я имею в виду под словом «дорого», может быть против нас с точки зрения времени и затрат. Следовательно, более целесообразно проделать всю такую работу на виртуальной модели DOM, которая является отражением реальной модели DOM, я имею в виду не реальной модели DOM.
React отражает изменения, которые происходят с виртуальной DOM, вместо того, чтобы полностью воссоздавать реальную DOM при каждом изменении состояния. Таким образом, обнаруживая различия между реальной DOM и виртуальной DOM, вычисляются изменения, которые должны быть сделаны в реальной DOM. и повторно отображать только измененные элементы в реальной DOM за один раз.
Мы можем резюмировать преимущества, которые он дает нам, следующим образом:
- Виртуальная модель DOM снижает использование памяти.
- Помогает повысить производительность, поскольку не нужно перестраивать все дерево
- Благодаря алгоритму Virtual DOM diff не происходит потери состояния при повторном рендеринге с использованием последних данных.
- Виртуальный DOM быстрее и проще визуализировать.
Наконец, я хотел бы вкратце упомянуть Shadow DOM и Virtual DOM.
Shadow DOM - это то же самое, что Virtual DOM?
Нет, они разные. Shadow DOM - это браузерная технология, предназначенная в первую очередь для охвата переменных и CSS в веб-компонентах. Виртуальная модель DOM - это концепция, реализованная библиотеками в JavaScript поверх API-интерфейсов браузера.
