Comments 5
Вообще нужно заметить, что это справедливо только если сравнивать с innerHTML. Если ручками делать через ссылку на конкретный элемент и Создавать через document.createElement(), то virtual Dom обречён быть медленнее (потому что он это и делает внутри). И если обновить только один элемент в массиве через конкретный элемент - только он и пересчитанная (не считая пересчета layout, но виртуальное дерево тут тоже не помощник, если чей-то размер поменялся, браузер вынужден пересчитать остальные).
И, справедливости ради, шаблонизатор с грамотным биндингом (который будет изменять значения только когда они меняются, причём не через innerHTML, а element.setAttribute к примеру), будет заведомо быстрее виртуального дома.
Ну и виртуальный дом начинает значительно тупить при большом количестве узлов (10 000+), нужно ещё и виртуальный рендеринг прикручивать.
Огромное и, возможно, главное преимущество виртуального дома - это удобство и возможность делать всякие willUnmount.
PS ещё пропущен concurrent mode, который не увеличивает скорость отрисовки, но повышает отзывчивость, и тут виртуальный дом превосходен.
Если ручками делать через ссылку на конкретный элемент и Создавать через document.createElement(), то virtual Dom обречён быть медленнее (потому что он это и делает внутри)
Так собственно никакого vdom в его исходном понимании в реакте уже и нету давно. Сейчас там тот же ангуляровский dirty checking, с той лишь разницей что в реакте сперва формируется полный список изменений (на render фазе) и потом он применяется (на commit фазе), а в ангуляре эти два процесса идут параллельно.
Вот в React можно посылать на отображение спосок разных элементов и он изменит только то, что не совпадает с предыдущим списком, в старом игровом GUI и текущем GUI редактора Unity тоже используется такой принцип. А что же с десктопными фреймвёрками? вот не смог найти ни одного для Python или C#. Почему?
(Автору статьи) Привет тебе из 2021, о путешественник во времени из далекого прошлого!
А если серьезно, то «Ну к чему все это, лучше бы водки выпили» (из писем Белинского Гоголю).
Ну а если совсем серьезно, то Абрамов и компания уже даже из документации и внутренного лексикона выпилили этот термин «виртуальный ДОМ» - https://indepth.dev/posts/1008/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react - потому что в Fiber все работает несколько тоньше. Вы бы еще класс-компоненты вспомнили. И вообще, виртуальный, шмиртуальный, это просто дерево компонентов (каждый компонент - это JSON с его именем и атрибутами). В общем, выше по ссылке все написано, как оно в 2021-м.
(А еще есть Svelte, в котором виртуального дома нет просто как класса и не нужно.)
Немного о том, как работает виртуальный DOM в React