Оригинальный ДОМ:

Если вы знакомы с javascript, вы должны иметь представление о DOM и манипулировании DOM. Его полная форма — «Объектная модель документа». Это структурное представление узлов и объектов HTML. Это древовидная структура. Он представляет собой пользовательский интерфейс (пользовательский интерфейс) вашего приложения. Таким образом, это был в основном обзор оригинального DOM, который мы, должно быть, изучали в Javascript до React. Теперь мы перейдем к нашей актуальной теме статьи, а именно «Виртуальный DOM».

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

Поскольку мы уже знакомы с DOM, теперь понять виртуальный DOM будет очень просто. По сути, это облегченное виртуальное представление реального DOM. React и некоторые другие декларативные веб-фреймворки, такие как Vue.js, используют Virtual DOM. Всякий раз, когда какой-либо узел обновляется, изменение сначала применяется к виртуальной копии фактического DOM. Он не манипулирует исходным DOM напрямую, а сначала изменяет его виртуальную копию, а затем это изменение реализуется в исходном DOM.

Зачем виртуальный DOM, когда у нас есть настоящий DOM?

Существует заблуждение, что виртуальный DOM быстрее оригинального DOM. Это не верно. Это не быстрее, но ускоряет повторную визуализацию веб-страницы. Поскольку он не перерисовывает весь документ, а просто перерисовывает обновленный узел.

Вот некоторые преимущества использования виртуального DOM:

  • Обновлять DOM быстрее, чем если бы каждый раз обновлялся весь DOM.
  • Это позволяет React быстро и эффективно обновлять DOM, не беспокоясь о базовой реализации DOM.
  • Это упрощает написание кода React, поскольку вы можете сосредоточиться на логике своих компонентов, а не беспокоиться о деталях работы DOM.
  • Это упрощает тестирование кода React, поскольку вы можете тестировать свои компоненты изолированно, не беспокоясь об остальной части DOM.
  • Частые манипуляции с DOM обходятся слишком дорого, поэтому мы предпочитаем виртуальный DOM.

Работающий:

Предположим, у нас есть DOM со структурой, теперь react создаст две виртуальные копии этого DOM. Теперь, всякий раз, когда в реакции происходит какое-либо изменение состояния, он никогда не обращается к реальному DOM напрямую. Сначала он обновит эти изменения в виртуальном DOM. Затем он сравнит виртуальный DOM со своим снимком (сделанным непосредственно перед обновлением). Теперь с помощью этого сравнения React определяет, какой компонент пользовательского интерфейса необходимо обновить. Этот процесс называется сравнением, а алгоритм, который он использует, называется алгоритмом сравнения.

Теперь, когда реакция знает, какой узел обновлен, теперь она заменит исходный DOM обновленным DOM. Этот процесс называется примирением. Чтобы избежать ненужного повторного рендеринга, в React используются «ключи». Ключ — это уникальный идентификатор. В React он используется для определения того, какие элементы были изменены, обновлены или удалены из списков.