Около месяца назад у меня было пробное техническое собеседование, и интервьюер спросил меня, что такое виртуальный DOM. Хотя я был знаком с этой концепцией, я не мог объяснить ее словами. Итак, теперь я собираюсь искупить свою вину и объяснить это здесь, чтобы у меня никогда больше не было этой проблемы.
Что такое ДОМ?
DOM означает объектную модель документа. DOM представляет собой кодовую версию веб-страницы. Когда вы вводите URL-адрес в выбранном веб-браузере, сервер отправляет HTML-код веб-страницы в ваш браузер, который затем отображается на вашем экране. Мне очень помогла эта цитата из React Kung Fu:
Сравните это с процессом, являющимся экземпляром программы. У вас может быть несколько процессов одной и той же программы, точно так же, как у вас может быть несколько DOM одного и того же HTML (например, одна и та же страница загружается на многих вкладках).
Когда вы используете ванильный JavaScript в приложении, вы манипулируете DOM с помощью прослушивателей событий, а не полностью изменяете базовый HTML-код, предоставленный сервером.
Проблема с манипулированием DOM
Хотя Vanilla JS и DOM Manipulation работают на практике, они быстро становятся невероятно неэффективными и сложными в управлении. Допустим, у вас есть базовый список дел с кнопкой удаления на каждом элементе:
<ul> <li>Make grocery list <button>Delete</button> </li> <li>Water plants <button>Delete</button> </li> <li>Wash sheets<button>Delete</button> </li> </ul>
С помощью старой простой манипуляции с DOM, если вы нажмете кнопку «Удалить» в разделе «Водные растения», JavaScript отредактирует каждый отдельный элемент списка, а не просто найдет тот, который нужно удалить, и соответствующим образом обновит его. Это может намного замедлить работу в долгосрочной перспективе. И чем больше приложение, тем больше производительность, скорость и эффективность становятся ключом к успеху.
Виртуальный дом
Чтобы решить эту проблему с помощью манипулирования DOM, создатели React популяризировали то, что мы называем Virtual DOM. По сути, это копия DOM, которая позволяет React делать то, что ему нужно, без проблем с медленными манипуляциями с DOM, о которых говорилось выше. Мне нравится, как Codecademy описывает это:
Думайте об управлении виртуальным DOM как о редактировании чертежа, а не о перемещении комнат в реальном доме.
В виртуальном DOM вместо обновления каждого отдельного элемента на странице при ее повторном отображении виртуальный DOM сравнивает текущую страницу с «моментальным снимком» страницы до того, как ею манипулировали, и обновляет только те элементы, которые изменились на настоящий ДОМ. В приведенном выше примере со списком дел, используя виртуальный DOM, мы могли бы найти только элемент «Водные растения», который нужно удалить, и убрать его. Намного лучше!
Вот почему у React такая высокая производительность, и, на мой взгляд, именно поэтому так много крупных компаний предпочитают его использовать. Вы также можете прочитать больше о Virtual DOM в документации React здесь. Надеюсь, это поможет, и удачного кодирования!
