React и Виртуальный DOM: Поймите раз и навсегда!

Показать описание

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

0:00 - Приветствие
0:08 - DOM дерево в JavaScript
2:17 - Пример. Смотрим как устроено DOM дерево
4:56 - Virtual DOM зачем нужен
5:57 - Пример. Смотрим как устроен Virtual DOM
7:30 - Как работает Virtual DOM
8:02 - Пример создания копии и сравнения
9:54 - Преимущества Virtual DOM
11:30 - Заключение

#javascript #react #webdevelopment #web #IT #frontend #программирование #обучениепрограммированию #virtual DOM # DOM #виртуальныйDOM

Рекомендации по теме

Комментарии

Ого, очень занимательно и подробно рассмотрена тема, ставлю заслуженный лайк👍

ГеоргийЗеннуров

Круто! Это, пожалуй, единственное объяснение, которое я поняла

pulyvil

Во истину всё четко и ясно разъяснил, спасибо)

potikaax

Очень понятно рассказываешь, прям по полочкам все разложил
Спасибо 🔥

evgen_dolf

Очень хорошая подача контента спасибо большое. Но DOM тоже не обновляется целиком каждый раз 10:35😀. DOM использует repaint и reflow механизмы для изменения DOM структуры( это влияет на сам элемент и возможно на дочерние ) это более эффективно чем перерисовывать весь DOM целиком.

movsesaghabekyan

Такой себе ролик если честно. Самое важное здесь это что
1) виртуальное дерево легковеснее
А остальное это вода что и все знают. Вопросы, которе меня волнуют это:
1) почему эффективнее? Перендеринг в обычном коде раз в 16 млс. Все изменения накапливаются и не сразу перерисовываются. Так же и в реакте по сути. Могу понять, что мы экономим на обращении к переменной (тегу напрямую), а не её поиске с обычным js по всему dom каждый сотый раз
2) Какие-нибудь экономии на reflow? Обычно изменения размеров 1 элемента меняют все оставшиеся в потоке ниже. Это как-нибудь регулируется?

KaelnsLarien

У меня сразу пачка вопросов: что за узел? где этот узел? кто его определил? где я его могу обнаружить? то что мышкой подвигал - это не показал что такое узел. Узел - это отдельный тег html, в котором могут находиться так же под узлы, с такими же параметрами, и с такими же данными, и так может происходить до бесконечности, в виду объекта в языке js. Контейнеры, ссылки, изображения и др. - это и есть язык html. Все что включает в себя html - включает в узел react, или наоборот: один элемент html = одному узлу ) Инструмент разработчика правильно называется, а не консоль, и она предназначена исключительно только для виртуализации твоих действий, наброска, тестирования... не более того ) Кто сказал что он создает только нужные элементы??? он создает полную копию дерева! И ты можешь использовать в точности ВСЕ доступные методы из основного дерева, согласно доступным браузеру методам и свойствам. MDN, в помощь ) В общем подытожу: учить, учить и еще раз учить!

MrAdminpavel