Abr@X@bra.ru
Курс по React JS #4. Виртуальный DOM
Курс по React JS #4. Виртуальный DOM

Курс по React JS #4. Виртуальный DOM

11.04.2017
520

С помощью JSX, React предоставляет удобный способ создания интерфейса. То есть мы пишем описание разметки которую хотим увидеть знакомым нам способом, за все остальное отвечает React.

Но как именно код JSX превращается в DOM? 

Чтобы в этом разобраться посмотрим, что из себя представляет React элемент.

Для этого перед тем как вывести JSX на страницу, посмотрим на один из элементов в консоли, например на title.




Как вы видите React element, это простой объект с наборам свойств. Этот объект представляет из себя образ DOM элемента или как это называется в React, виртуальный DOM элемент.

У объекта виртуального DOM имеется несколько свойств. 

Те свойства которое имеют нижнее подчеркивание, это свойства не для нас. В свойстве type как вы наверное догадались, указывается тип элемента. Со со свойствами key, props и ref мы познакомимся позже. Сейчас скажу лишь, что самым важным свойством является свойство props, в котором определяются свойства передаваемые элементу.

Если посмотреть на свойство props, то внутри мы обнаружим одно свойство children, в котором содержится строка “React Todo”.


Содержимое элемента автоматически присваивается в качестве значения свойства children. У данного элемента это единственное свойство props, так как у элемента мы никаких свойств не определяли.

Если же мы в консоли посмотрим на элемент subtitle.




То в свойстве props помимо свойств children с содержимым элемента так же имеется свойство className с классом которым мы указали.

Посмотрим также на элемент container, который содержит в себе два других элемента.




У этого элемента в свойстве children теперь находится массив, состоящий из других элементов.

Как вы видите React создает дерево объектов, которое называется виртуальный DOM. Далее эту структуру мы отправляем в метод render, который генерирует настоящий DOM.

Метод render

В этом можно убедиться если посмотреть на то, что возвращает метод render. Результат метода render поместим в переменную DOM.


В место app отправим container и после посмотрим на содержимое DOM в консоли.




В консоли мы видим дерево DOM элементов. Это те же DOM элементы которые можно увидеть во вкладке Elements.


DOM из JSX

Получить DOM можно и использую JSX. Для этого вместо контейнера отправим обратно app.


Мы получили такой же результат.


Ответы на вопросы

Скорее всего у вас появилось несколько вопросов. Во первых зачем вообще нужен виртуальный DOM? И во вторых, почему же не работать с настоящим DOM?

Для того, чтобы ответить на эти вопросы, рассмотрим классический стиль web-разработки.  

Сначала мы находим или создаем элемент.


Далее каким либо образом модифицируем его.


Такой способ работы с DOM имеет несколько проблем. Во первых очень трудно следить за изменениями. Так как приходится следить, как за текущим так и за предыдущим состоянием DOM.

Во вторых, непосредственно манипуляция DOM может быть медленной.

Если у вас есть опыт работы только с чистым JavaScript или jQuery, то возможно с такими проблемами вы не сталкивались.

Эти проблемы становятся заметны при переходе от простой манипуляции DOM к написанию полноценных приложений.

Для решения этих проблем и был придуман виртуальный DOM. Который представляет из себя дерево простых объектов.


Работать с простыми объектами, намного быстрее, чем работать с DOM элементами. Благодаря этому при необходимости обновления, виртуального DOM проще воссоздать заново, нежели, чем изменять его.


Таким образом вместо того, чтобы следить за изменениями, мы просто говорим, React какое состояние настоящего DOM мы хотим увидеть.

React же отвечает за то, чтобы настоящий DOM соответствовал виртуальному.

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

Таким образом React находит оптимальное количество изменений, которое необходимо применить настоящему DOM.   

В результате мы получаем понятный и оптимизированный способ, создания web-приложений.


React JS
Читайте также:
Курс по React JS #3. JSX

Курс по React JS #3. JSX

В прошлом выпуске уроков по React JS, мы создавали React элементы с помощью метода React.createElement. Таким способом м...
Читать
Курс по React JS #2. Средства разработчика

Курс по React JS #2. Средства разработчика

Продолжаем изучать React JS. В этом посте я расскажу как установить и настроить средства разработчика, чтобы процесс...
Читать
Курс по React JS #1. Пилотный выпуск. Привет React!

Курс по React JS #1. Пилотный выпуск. Привет React!

В этом посте расскажу как написать первое простое приложение на React js.
Читать
Источник: codedojo