Многие существующие фреймворки до появления React напрямую манипулировали DOM при каждом изменении.
Во-первых, что такое DOM?
DOM ( Объектная модель документа ) представляет собой древовидное представление страницы, начинающееся с тега и переходящее в каждого дочернего элемента, которые называются узлами.
Он хранится в памяти браузера и напрямую связан с тем, что вы видите на странице. В DOM есть API, который вы можете использовать для его обхода, доступа к каждому отдельному узлу, их фильтрации, изменения.
API – это знакомый синтаксис, который вы, вероятно, видели много раз, если бы вы не использовали абстрактный API, предоставляемый jQuery и друзьями:
document.getElementById(id) document.getElementsByTagName(name) document.createElement(name) parentNode.appendChild(node) element.innerHTML element.style.left element.setAttribute() element.getAttribute() element.addEventListener() window.content window.onload window.dump() window.scrollTo()
React сохраняет копию представления DOM для того, что касается рендеринга React: виртуальный ДОМ
Виртуальный ДОМ Объяснил
Каждый раз, когда меняется DOM, браузеру приходится выполнять две интенсивные операции: перерисовывать (визуальные или содержательные изменения элемента, которые не влияют на макет и расположение относительно других элементов) и перерисовывать (пересчитывать макет части страницы – или весь макет страницы).
React использует виртуальный DOM, чтобы помочь браузеру использовать меньше ресурсов, когда необходимо внести изменения на странице.
Когда вы вызываете setState() для Компонента, указывая состояние, отличное от предыдущего, React помечает этот компонент как грязный . Это ключевой момент: React обновляется только тогда, когда Компонент явно изменяет состояние.
То, что происходит дальше, это:
- React обновляет виртуальный DOM относительно компонентов, помеченных как загрязненные (с некоторыми дополнительными проверками, такими как запуск
shouldComponentUpdate()) - Запускает алгоритм различий для согласования изменений
- Обновляет реальный DOM
Почему виртуальный DOM полезен: дозирование
Ключевым моментом является то, что React пакует большую часть изменений и выполняет уникальное обновление реального DOM, изменяя все элементы, которые необходимо изменить одновременно, поэтому перерисовка и перерисовка браузера должны выполняться для визуализации изменения выполняются только один раз.
Оригинал: “https://flaviocopes.com/react-virtual-dom/”