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

Начнем с определения в reactjs.org

Виртуальный DOM (VDOM) — это концепция программирования, при которой идеальное или «виртуальное» представление пользовательского интерфейса хранится в памяти и синхронизируется с «реальным» DOM с помощью такой библиотеки, как ReactDOM. Этот процесс называется примирением.

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

Виртуальный DOM — это концепция, реализованная библиотеками поверх API браузера. Всякий раз, когда в браузере вносятся изменения, JS обходит весь DOM вместо того, чтобы отображать только ту часть, которая требует изменений. Что долго и дорого.

Проще говоря, предположим, что двигатель вашей машины нуждается в ремонте, поэтому вы почините двигатель, а не всю машину. То же самое и с виртуальным DOM, вместо рендеринга всего DOM, рендерится только тот элемент, в котором внесены изменения.

React использует алгоритм Diff для сравнения изменений между новым деревом и самым последним деревом (дерево здесь не что иное, как сделанные изменения, которые являются новым VDOM и самым последним VDOM). Этот процесс сравнения называется согласованием.

React анализирует дерево, используя поиск в ширину (BFS).

Всегда имейте в виду, что Virtual DOM физически не существует, это представление в памяти или план Real DOM.

Возьмем другой пример: вы создаете форму, состоящую из двух полей ввода. Теперь вам нужно добавить еще одно поле ввода, когда вы добавляете третье поле ввода, VDOM создается с вашими изменениями, а реальный DOM остается неизменным. Теперь происходит сравнение между VDOM и реальным DOM, и изменения вносятся только в div, где это необходимо.

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

Не запутайтесь, что VDOM разработан React js, VDOM — это концепция, которая используется React js. Виртуальный DOM — это, по сути, снимок экрана DOM в данный момент времени. Всякий раз, когда вносятся изменения, компонент перерисовывается, создавая новый VDOM.

Виртуальный DOM завоевал свою популярность, потому что он ускоряет ваше приложение и устраняет ненужный рендеринг всей страницы. Что экономит и время и деньги.

Надеюсь, статья вам понравилась и оказалась полезной. Если я что-то пропустил, сообщите мне об этом в разделе комментариев.