Всем привет, сегодня в этой короткой статье давайте поговорим о важной концепции React — виртуальном DOM.
DOM или объектная модель документа — это программный интерфейс для HTML. Благодаря этому и использованию JavaScript (в большинстве случаев) мы можем иметь доступ к определенным элементам HTML-страницы, манипулировать ею и делать веб-страницы более динамичными.
Мы можем изменять и создавать элементы из документа. DOM обычно представляется в виде древовидной структуры узлов, где каждый узел является элементом HTML.
Ниже представлено иерархическое древовидное представление DOM, начиная с корневого элемента, являющегося HTML, и следующих за ним других узлов:
Но поскольку у нас есть DOM, зачем нам виртуальный DOM и в чем разница между стандартным DOM и виртуальной версией?
Что ж, основная проблема с традиционным DOM заключается в том, что он отнимает много времени, использует много памяти и медленно обновляется. Имея все больше и больше динамических веб-приложений, становится очень сложно модифицировать DOM, а обновления становятся все длиннее.
А вот и React и введение Virtual DOM.
Виртуальный DOM — это виртуальное представление DOM браузера, которое будет храниться в памяти. Всякий раз, когда в элемент веб-приложения вносятся изменения, React проверяет, совпадает ли HTML-код компонента в виртуальном DOM. Если нет, DOM браузера будет обновлен, с другой стороны, если это то же самое, DOM не будет изменен. Обычно это то, что мы называем процессом примирения, который мы можем разделить на 4 части:
- виртуальный DOM обновляется всякий раз, когда элемент изменяется
- этот виртуальный DOM сравнивается с предыдущей версией виртуального DOM
- все измененные элементы обновляются до DOM браузера
- веб-страницы обновляются в соответствии с DOM браузера
Благодаря согласованию и тому, как React работает за кулисами, DOM обновляется только тогда, когда это необходимо, а не с какими-либо модификациями. Как следствие, веб-сайты работают быстрее.
Но важно иметь в виду, что даже если веб-сайты работают быстрее с React, если многие элементы необходимо обновить, это приведет к замедлению работы веб-сайта. Итак, как мы можем улучшить это и сохранить преимущество React — в основном скорость?
Разработчики React нашли отличный способ справиться с этой проблемой и создали архитектуру React Fiber. Принципы Fibre Architecture просты, обновления идут одно за другим, только по мере необходимости и в зависимости от их приоритета.
Например, если пользователь просматривает определенную часть веб-страницы и нажимает кнопку, в результате которой отображается текст в разных частях страницы, обновления будут выполняться для текста, непосредственно видимого пользователем, и то произойдет для текста, который в данный момент не виден. Обновления вносятся постепенно, шаг за шагом, а веб-приложение оптимизируется.
Спасибо за уделенное время, надеюсь, вам понравилась эта короткая статья, она была написана для освежения знаний, без слишком подробного описания.
До встречи в следующей статье!
