Чем отличается виртуальная модель React от реальной модели DOM в отношении изменения стиля?

Все:

Я новичок в React.js, много слышал о виртуальном домене React, но мне интересно, в чем основное различие между ним и реальной DOM, когда речь идет о простом случае, таком как изменение стиля элемента:

Скажем, я хочу изменить расстояние от div до других, я могу использовать jQuery для:

$("div#test").css("margin-left","10px");

И я понимаю, как браузер работает с реальным домом:

  1. выполните поиск по дереву DOM и найдите этот узел.
  2. обновление в соответствии с атрибутом стиля (я думаю, это дерево CSSOM)
  3. рендеринг представления

Итак, мой вопрос:

  1. Я правильно понимаю?
  2. Если это в основном правильно, то что делает виртуальная модель DOM для повышения производительности? Разве он не просто использует алгоритм сравнения, чтобы сравнить, что нужно обновить в его облегченной версии DOM-дерева, и обнаружить, что левый край нуждается в обновлении, и применить то же самое, что и в jquery, к реальной DOM?

ИЛИ

  1. если это неверно, может ли кто-нибудь рассказать немного подробнее о том, какую тяжелую работу выполняет браузер с реальной DOM, которую React virtual DOM пропускает для повышения производительности?

Я нахожу сообщение, в котором упоминаются 3 подробные операции с виртуальной DOM:

Что делает его действительно быстрым:

  1. Эффективные алгоритмы сравнения.
  2. Пакетные операции чтения / записи DOM.
  3. Эффективное обновление только поддерева.

По сравнению с этим, означает ли это в реальной DOM:

  1. Не совсем эффективный алгоритм сравнения или нет алгоритма сравнения (просто обновите все)?
  2. Одна операция чтения / записи, например, если я дам 3 обновления стиля даже для одного и того же элемента DOM, браузер будет искать этот элемент в дереве DOM 3 раза и обновлять стиль?
  3. Обновите всю DOM из корня (в основном, как выгрузить текущее дерево и заново построить все дерево DOM, независимо от того, какая часть дерева нуждается в обновлении, и найдите узел и обновите)

Спасибо


reactjs virtual-dom
person kuanslove    schedule 03.02.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Прежде всего, вы правы в том, как работает «настоящая» манипуляция с DOM.

React хранит в памяти представление «реальной» модели DOM, которую мы называем виртуальной DOM. Вместо того, чтобы пересекать «реальную» DOM для изменения узла, к этой виртуальной DOM легко и быстро получить доступ, что обеспечивает более быструю доставку обновлений. Кроме того, представьте себе множество изменений в DOM, обход «настоящего» DOM займет много времени. Это одна из ситуаций, когда виртуальная модель DOM действительно выделяется.

person Jan Franz Palngipang    schedule 18.08.2016