React, разработанная и поддерживаемая Facebook, является одной из самых популярных библиотек JavaScript для создания пользовательских интерфейсов. В его основе лежит высокопроизводительный механизм Virtual DOM, который оптимизирует рендеринг и повышает производительность приложений. В этой статье я попытаюсь объяснить виртуальный DOM, проиллюстрировав его преимущества, исследуя потенциальные недостатки и прогнозируя его будущее. Тем не менее, эта статья предоставит вам руководство высокого уровня, для детального понимания постарайтесь найти хороший учебный курс.

Что такое виртуальный DOM React?

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

Вот описание того, как это работает:

  1. JSX в виртуальный DOM. Когда вы пишете JSX, он передается в вызовы React.createElement, которые представляют элементы в виртуализированном виде, создавая дерево объектов JavaScript, внутренне представляющих структуру вашего пользовательского интерфейса.
  2. Согласование: всякий раз, когда происходит изменение, например, взаимодействие пользователя с приложением или изменение данных, создается новое дерево виртуального DOM. Затем React сравнивает это новое дерево с предыдущим, чтобы определить точные изменения (процесс, известный как «различение»).
  3. Пакетные обновления. Вместо немедленного применения изменений в DOM, React объединяет их вместе, чтобы свести к минимуму прямые манипуляции с DOM и оптимизировать производительность.
  4. Обновите реальный DOM. После выявления изменений React обновляет только затронутые узлы в реальном DOM, обеспечивая минимальное время обновления и повышая производительность.
import React from "react";

function App_medium() {
  return (
    <div>
      <h1>Hello, Medium Virtual DOM!</h1>
    </div>
  );
}

export default App_medium;

В этом компоненте React:

  • JSX транслируется в вызовы React.createElement, тем самым инициализируя представление Virtual DOM.
  • Если в этом компоненте произойдет изменение состояния, React создаст новое дерево Virtual DOM и сравнит его с существующим, чтобы найти различия.