19.12.2017

React: Виртуальный DOM

Проблема

Управление DOM-элементами это сердце современных интерактивных веб-сайтов. К сожалению, оно так же и значительно медленнее, нежели большинство операций в JavaScript.
Причем эта медлительность усугубляется ещё и тем, что большинство JavaScript-фреймворков делают обновления в DOM намного чаще, чем им на самом деле требуется.

В качестве примера, скажем у нас есть список из десяти элементов. Вы отключаете первый элемент. Большинство JavaScript-фреймворков будут перестраивать весь список. А это в десять раз больше работы, чем требуется! Всего лишь один элемент изменился, но оставшиеся девять будут перестроены в таком же виде, как и были до этого.

Перестроить список — это не большая нагрузка для браузера, но современные веб-сайты могут использовать огромное количество DOM-объектов при манипуляциях. Неэффективное обновление превращается в серьезную проблему.

Для решения этой проблемы, люди из React продвигают и популяризируют нечто, называемое Виртуальный DOM (англ. virtual DOM).

Виртуальный DOM

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

Управление DOM — это медленная процедура. Управлять же виртуальным DOM значительно быстрее, потому что не нужно ничего отображать на экране. Представьте себе, что управление виртуальным DOM это как изменение чертежа, вместо того, чтобы перемещать комнаты в настоящем доме.

Как он помогает

Когда вы визуализируете JSX элемент, каждый отдельный виртуальный-DOM объект будет обновлен.

Это звучит совершенно не эффективно, но стоимость этого незначительна, потому что виртуальный DOM может обновляться очень быстро.

Как только виртуальный DOM был обновлен, React сравнивает виртуальный DOM со снапшотом виртуального DOM, который был сделан прямо перед обновлением.

Сравнивая новый виртуальный DOM с версией до обновления, React определяет, какой именно DOM-объект изменился. Этот процесс называется «диффинг»(англ. diffing — нахождение различий).

Как только React знает, какой виртуальный DOM-объект изменился, React обновляет такие объекты, и только эти объекты в реальном DOM. Из нашего примера ранее, React будет достаточно хитрым в перестройке одного отключенного элемента списка, и оставит оставшуюся часть списка в покое.

В этом и заключается весомая разница! React может обновлять только необходимые части DOM. За эту инновацию репутация React стала очень большой.

Подытоживая, вот что происходит, когда вы пытаетесь обновить DOM в React:

  1. Весь виртуальный DOM будет обновлен.
  2. Виртуальный DOM будет сравниваться с тем, как он выглядел до обновления. React определяет, какие именно объекты изменились.
  3. Измененные и только измененные объекты будет обновлены в реальном DOM.
  4. Изменения реального DOM заставляют меняться отображение.

Если вы хотите узнать больше о виртуальном DOM, то хорошо начать отсюда.

Оригинал: React: The Virtual DOM

Опубликовано: 19/12/2017

Добавить комментарий

Ваш адрес email не будет опубликован.