Использование виртуального dom с реагированием: 1. Повышение производительности кода реагирования. Виртуальный DOM — это объект js. Создание объекта js требует гораздо меньше производительности, чем создание реального DOM. Замена создания реального DOM созданием виртуального. DOM будет иметь огромное влияние. 2. Для создания кросс-терминальных приложений на стороне браузера виртуальный DOM преобразуется в отдельные узлы DOM браузера или может быть преобразован в компоненты собственных приложений для реализации кросс-терминала. приложения.
Операционная среда этого руководства: система Windows 10, версия 17.0.1, компьютер Dell G3.
1. Значительно улучшена производительность
2. Он поддерживает перекрестные приложения (React Native). На стороне браузера виртуальный DOM преобразуется в отдельные узлы DOM браузера. Его также можно преобразовать в компоненты собственных приложений и реализовать межсегментные приложения.
Почему это повышает производительность
Если виртуального DOM нет, то реальный DOM будет создаваться напрямую. Каждый раз, когда данные изменяются, будет создаваться настоящий DOM, а затем реальный DOM будет сравниваться, а затем реальный DOM будет изменен. Создание реального DOM. DOM будет потреблять много производительности (поскольку дерево DOM, созданное JS, будет вызывать API уровня веб-приложения, потеря производительности этого уровня API очень велика), что потребует много производительности.
С виртуальным DOM все по-другому. Виртуальный DOM — это js-объект. Создание js-объекта требует гораздо меньше производительности, чем создание реального DOM. Замена создания реального DOM созданием виртуального DOM приведет к значительному повышению производительности.
Виртуальный DOM
Виртуальный DOM — это объект js.
<div id='abc'><span>привет, мир</span></div>//Real DOM['div', {id: 'abc'}, ['span', {}, 'привет, мир' ]]//Виртуальный DOMПроцесс загрузки и обновления страницы
1. данные состояния
2.jsx-шаблон
3. Данные + шаблон генерируют виртуальный DOM
4. Используйте виртуальный DOM для создания реального DOM
5.изменения состояния
6. Шаблон Data + генерирует новый виртуальный DOM.
7. Сравните исходный виртуальный DOM и новый виртуальный DOM (алгоритм сравнения).
8. Непосредственно управляйте DOM и меняйте разные места.
Расширьте свои знания:
Какова цель виртуального DOM?
Чтобы добиться эффективного обновления элементов DOM на странице;
В традиционных веб-приложениях мы часто обновляем изменения данных в пользовательском интерфейсе в режиме реального времени, поэтому каждое небольшое изменение в данных приводит к повторной визуализации дерева DOM.
Цель виртуального DOM — накапливать все операции, статистически рассчитывать все изменения и равномерно обновлять DOM.
Значительно улучшенная производительность
Он позволяет использовать перекрестные приложения (React Native). На стороне браузера виртуальный DOM преобразуется в отдельные узлы DOM браузера. Его также можно преобразовать в компоненты собственных приложений и реализовать межсегментные приложения.
Разница между DOM и виртуальным DOM
1. Виртуальный DOM не будет выполнять операции верстки и перерисовки.
2. Часто модифицируйте виртуальный DOM, затем сравнивайте и модифицируйте сразу части, которые необходимо изменить в реальном DOM (заметьте!), и, наконец, выполняйте верстку и перерисовку в реальном DOM, чтобы уменьшить потери верстки и перерисовки лишнего DOM-узлы.
3. Эффективность частой верстки и перерисовки реального DOM достаточно низкая.
4. Виртуальный DOM эффективно уменьшает необходимость перерисовки и верстки больших областей (реальных узлов DOM), поскольку в конечном итоге он отличается от реального DOM и может отображать только его часть.