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

Хорошо, прежде чем я углублюсь во все хорошие детали того, что это такое, давайте сформулируем это в терминах, понятных каждому среднестатистическому Джо.

За кулисами каждый веб-сайт организован в виде домена. Картинки, боковая панель и все эти другие элементы по сути являются элементами HTML, управляемыми в dom.

Разработчики вручную создают весь HTML-код вокруг таких элементов, как панель поиска, изображения и кнопки, и иногда добавляют к ним некоторые функции, такие как возможность отправки формы при нажатии кнопки отправки.

После отправки формы необходимо проверить каждый элемент в dom, чтобы увидеть, есть ли какие-либо изменения. И если компонент, который был изменен, имеет несколько дочерних компонентов, то все эти дочерние компоненты также должны быть повторно визуализированы.

Ну… это звучит тормозом для производительности. Потому что, если дом должен будет перерисовывать кучу компонентов при каждом небольшом изменении, это будет дорого с точки зрения памяти.

А вот и виртуальный дом.

Виртуальный дом — это облегченная копия настоящего дома. Каждый отдельный элемент обновляется, он обновляет виртуальный дом вместо обычного дома.

На следующем изображении показана связь между виртуальным домом и самим домом:

Реагируйте на регулярные проверки изменений состояния компонентов. После изменения компонента он сравнивает новый виртуальный дом со старым виртуальным домом. Этот процесс известен как «диффинг».

После этого он изменяет элементы исходного виртуального дома. И как только это будет сделано, он обновит настоящий дом. Это известно как «примирение».

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

Ну… каковы плюсы виртуального дома?

  • производительность: Гораздо быстрее и эффективнее просто изменить один элемент и повторно отобразить виртуальный дом вместо повторного рендеринга всего браузера.

Есть и обратная сторона: нам нужно сделать дополнительную копию фактического dom для отслеживания изменений. Следовательно, это вызовет больше памяти, чем просто обновление из домена браузера, где существует одна копия дома.

Вот и все! Теперь вы понимаете, что такое виртуальный дом в React.