В чем причина лучшей производительности React по сравнению с прямым манипулированием DOM с помощью JQuery?
У меня есть сомнения, связанные с манипулированием DOM в отношении сравнения между React Virtual DOM и JQuery прямым манипулированием DOM. Допустим, мы хотим обновить один узел DOM:
А) с помощью React.js:
1.React создает виртуальную DOM (в памяти, представление реальной DOM, созданное с помощью javascript), назовем его VD1
- оказывать()
3.React создает новый экземпляр Virtual DOM, назовем его VD2
4.React сравнивает VD1 и VD2 и обнаруживает, что они различаются в одном узловом элементе.
5.React находит это место и «внедряет» изменение, не затрагивая только «изменяющееся» место, не перестраивая всю реальную DOM от корня до вершины дерева DOM.
Б) То же, но с использованием JQuery:
1. Мы внесли изменения, напрямую управляя реальной DOM через JQuery. команда
Браузер обнаруживает изменения, поэтому просматривает все (реальное) дерево DOM и ищет измененное место.
3.После того, как обнаружит, что он применяет изменения и перестраивает DOM, чтобы предоставить пользователю новую версию страницы
Если я правильно понимаю, это основная причина отказа от JQuery и прямых манипуляций с DOM в пользу виртуальных DOM и лучшей производительности React в целом?
Ответы 1
React использует виртуальную модель DOM, поэтому в ней все хранится в памяти так, как он хочет, поэтому ее можно легко найти, чтобы получить нужные элементы. Он вносит необходимые изменения, а затем запускает алгоритм различий, поэтому ему нужно обновить только то, что абсолютно необходимо. В jQuery все манипуляции с DOM происходят во встроенном режиме, поэтому у него нет виртуальной версии, и он должен анализировать фактическую DOM, что намного менее эффективно, чем анализ версии, хранящейся в Virtual DOM.
проверьте это один раз stackoverflow.com/a/52555662/3555775