86 - Virtual DOM - React JS

it-incubator.io/education/?ut... - человекоориентированное, честное и профессиональное обучение front-end и back-end разработке гарантированно до трудоустройства за фиксированную стоимость.
Поддержать меня и получить доступ к дополнительному контенту можно вот здесь:
/ itkamasutra
Помогайте друг другу вот здесь: t.me/reactjs_samurai
API: social-network.samuraijs.com/
VirtualDOM - то, благодаря чему ReactJS так взлетел. Он говорит: настоящий DOM - это дорого, это перерисовки, это ресурсы, дёрганья, и так далее... Давайте Я (REACT) брать брать JSX из компонент и на основе его формировать Virtual DOM - набор оъектов, из который потом буду превращать в настоящий DOM. Зачем этот промежуточный слой нужен?
Для того, чтобы прежде чем идти на основе Virtual DOM строить настоящий DOM... Я смогу сравнить тот VirtualDOM, который у меня уже был, с тем, который я получил в текущей отрисовке из компонент, и... Сравнить их. И если изменения есть, я пойду и точечно эти изменения перерисую в настоящем DOM.
Как результат - коллосальный прирост производительности по сравнению с тем, как с DOM работали раньше (шаблонизаторы, innerHTML и так далее)...
Обязательно гуглим эту тему в официальной документации!
Летим, самураи!!!
Уроки по React JS: • Курс "React JS - путь ...
* Сайты:
it-kamasutra.com
it-incubator.by
samuraijs.com
* Мы в соц. сетях:
itkamasutra
/ itkamasutra
telegram.me/itkamasutra
* Мои личные VK и Insta:
d.kuzyuberdin
/ it.kamasutra.dimych
#VirtualDOM #reactJS

[@bugaga8144]

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

[@n0escape]

Отчет по уроку: 1) DOM - это набор объектов, которые созданы на основе тегов из html разметки 2) При изменении/добавлении/удалении элемента DOM перерисовывается вся страница полностью 3) React, получая jsx генерирует VirtualDOM 4) VirtualDOM - это тот же набор объектов как и DOM, но при изменении/добавлении/удалении элемента - VirtualDOM не пересоздает все его состовляющие (объекты), а сравнивает с существующими и если есть изменения - вносит их точечно. 5) React на основе VirtualDOM создает DOM, так же точечно его изменяя (обобщенно - React берет контроль над точечными изменениями в DOM. Механизм сравнивания старого и нового в VirtualDOM называется Reconciliation) 6) Создание/пересоздание/сравнение/редактирование/удаление в VirtualDOM - трудоемкая операция (иногда) 7) иногда следует запрещать комопненте возвращать jsx - следовательно запрещать рендер комопоненты (будующий урок) 8) jsx при помощи Babel превращатся в js, и теги выглядят как React.createElement(...) - так создаются элементы VirtualDOM, в отличае от document.createElement - который создается элемент DOM

[@zergzerg4844]

2й пункт не правильный, DOM не перересовывается полностью, а точечно добавляет элемент в верстку. Лучше сказать, что Реакт берет на себя те громоздкие задачи которые ты бы писал без него.

[@IgniosTyumen]

Многое не новое, т.к документация зачитывалась до дыр + литература начинается с этой темы, но за 35 минут объяснено так, что документация теперь не рождает вопросов=) Лайк за лучшие уроки по ReactJS, VirtualDOM и такой марафон по курсу!

[@user-qn4wm9jb1d]

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

[@theWorldIsMultivariate]

Очень интересно про Virtual DOM , теперь понимаю как это работает. Спасибо!

[@user-hg6im5cg2i]

О как же мне понравился урок, как будто сказку прослушала.Спасибо Дима!!!

[@vladpobidash]

Спасибо за урок, попытался понять и объяснить эту тему своей сестре... Если вы думаете что то-то знаете и понимаете, попытайтесь объяснить эту тему 15 летней школьнице, которая понятия не имеет как и что работает. Вы откроете для себя, что не так уж много вы и знаете) зато потом на совбесе как-то нужно будет еще это и красиво объяснить. В общем, пытайтесь проговаривать все что учите, это реально помогает понять пробелы и научиться красиво говорить. После такого лучше понимаешь на сколько крут Димыч и как много знает и умеет это пояснить!

[@Nikita-xe5kv]

Так и делаю)

[@user-yk9lw9qe3y]

ага.. когда к собеседованию готовлюсь жене рассказываю .. что нить про ospf или bgp (жена в школе работает если что ). И по ее глазам сразу становится понятно сам то я знаю тему или нет )

[@user-vs2tp7ke3x]

15 летняя школьница, обращайся, могу объяснить)

[@user-dc1cr5ny3q]

Очень доступное объяснение, как и всегда) Летим дальше!!)))

[@ollegat]

Подучу ка я реакт что б потом херяк херяк

[@theoty-js]

лучшее что можно найти по virtual dom

[@fgood574]

Самое классное объяснения, спасибо!

[@jmksm]

Офигенно объяснил. Спасибо!

[@arthacker4382]

Уххх осталось немного, супер объяснение, спасибо тебе за твой труд, спасибо за все, летим ...

[@user-ml5vp6rp9n]

Это было весьма занимательно, спасибо!

[@dimagraf5411]

Все понятно и доходчиво, спасибо!)

[@user-pv5is5pz4j]

Было очень интересно) освежила в памяти информацию про virtual DOM. Спасибо за урок)

[@mariia6820]

Доходчиво,четко и как всегда без воды!Лучшее объяснение Virtual DOM React Js

[@ilyataldykin4698]

Лучший курс! Спасибо💪

[@user-di9dd7bb4l]

React JS Virtual DOM Спасибо за курс!

[@marsonleonardovich4036]

Отличный урок! Спасибо! Virtual DOM!

[@spacerider9426]

Спасибо огромное за твой труд! Смотрю дальше!

[@ervinabliamitov2149]

Спасибо, Димыч! Отличное видео, всё ясно и доступно. Отдельное спасибо, за то что напоминаешь каждый раз читать доки и всё такое, это конечно помогает держать себя в тонусе!

[@user-xy6nb8hc9d]

Спасибо, очень круто объяснил! Мне кажется это стоит давать на первых уроках.

[@romanpomin1967]

Как же легко зашло видео, когда уже несколько раз посмотрел 100-ый выпуск)

[@ivanmiarkulau8320]

Спасибо за рассказ о работе virtualDOM в React. Всё предельно ясно)

[@janechaus4630]

Не устану благодарить за самые крутые и понятные лекции по Реакт! Большое спасибо, Дмитрий, за легкую подачу)

[@semial]

Спасибо за урок, Димыч! Про Virtual DOM теперь стало понятно еще больше

[@ritaravinsky8262]

Как же круто объяснено!! Спасибо большое!

[@user-tt4hi5tc5p]

крутой урок , бомби дальше😀

[@user-cl8hi9jw3b]

спасибо огромное тебе мужик, лучшие курсы по реакту

[@user-vj8hj9jk2b]

Все разложилось по полочкам и встало на свои места - DOM, VirtualDOM, React, Babel, JSX. Респект автору)

[@user-qo8dg2lm9x]

Нигде еще не встречал настолько толкового обьяснения, даже записал себе основные аспекты. Спасибо! Лойс!

[@maximparmon9534]

33:22 - в примере с key использованы университеты-чемпионы американской студенческой лиги по баскетболу (NCAA). Не знаю зачем вам эта информация, я просто перезанимался, походу.

[@user-cy4cz7zx4m]

Спасибо за урок

[@ole_oli]

Димычьб спасибо, всё очень круто!!! React, Redux, Virtual Dom. Бомбим дальше!!!

[@sergeyprivalov9442]

Огонь! Спасибо

[@__online7250]

Как всегда крутое объяснение! Кажется. что все очень просто)

[@user-yq6ym5uo7m]

Это просто пушка, я как будто впервые мир увидел. Отличное объяснение. Спасибо.

[@vazgenaleksanyan2929]

Крутое видео про virtual dom. Спасибо большое

[@vladimirww5152]

Классно всё разложил!)

[@ihorprokopenko4837]

Спасибо большое, очень достойное объяснение React virtual DOM

[@pashabezk]

2022. Спасибо большое! Много всего, что уже знал, но полезно собрать снова все в кучу. Плюс пару моментов про оптимизацию тоже узнал

[@TRIZ-Bogatyregold]

Димыч спасибо за лекцию про VDOM! Полезно! Запомнил слово reconciliation - сравнение/соглавсование VDOM и DOM!

[@GoldenPrinceYT]

Спасибо!

[@savkaviktor]

Ха, мой лайк был 2000-ым )) Самый крутой курс по React!

[@user-np9mq5xc7j]

Спасибо! Круто!

[@smolhs1586]

Хороший базовый урок по Vitrual DOM. Спасибо

[@user-il4ph3fr6h]

интересно, полезно, спасибо

[@marina.health]

Спасибо, Димыч, все очень понятно 😊

[@dob1wan174]

лично для меня этот видос был рили полезным и много нового узнал!! спасибо!! Virtual DOM , React , JS , Redux , Java Script летим дальше!

[@user-fq9is5kg1v]

Было полезно, было интересно! Virtual DOM, React, JS

[@martyn1716]

все по полочкам, спасибо Дима

[@nspm_soul9459]

Просто лучший И курс, и человек)

[@user-nk6ih7uh1h]

Дима, у тебя определенно есть талант по подробному и понятному объяснению не самого легкого материала! Тема Virtual DOM и обычного DOM теперь намного лучше понимается. Большое спасибо за твою работу! Это точно лучший полный курс по React JS. Подтягиваем нативный JavaScript

[@dmitrysvetlov6001]

лучшее объяснение по VirtualDom, из тех, что я видел

[@safronmanDev]

Разложил все по полочкам

[@user-ei5zp2qi4j]

Спасибо

[@valeramischenko9391]

очень доходчивое объяснение Virtual DOM особенно в купе с документашкой про reconcilation!!! Читайте документацию))) люблю эту фразу)

[@user-tt3bc7yk8r]

ну вот и 50к. поздравляю)

[@wild_wizards]

Было полезно, очень хорошо все объяснил. Лайк!

[@alexandera7398]

Мега крутое объяснение! Лайк за труды!

[@georgylistopad3976]

Это лучшее видео на тему работы Реакта. Димыч просто талант и прирожденный педагог! Спасибо огромное, долго эта тема у меня была неразобрана, но теперь все встало на свои места в голове.

[@zeyter2768]

Я тебя люблю, ты первый на кого я подписался и поставил лайк и написал комментарий искренне. Спасибо за контент и твою манеру речи ❤

[@ctumyji9737]

Было интересно и полезно! Лайк поставил, обнял, полетел дальше! :) React JS от Димыча - лучший курс!

[@user-wd3tl2rx9p]

Дима, спасибо

[@user-qs7ij8df4q]

Virtual DOM ! Все супер! Летим дальше!)))) Димыч, спасибо!

[@user-et8qw8nu2m]

Virtual DOM - React JS - после этого урока стал мне ЕЩЁ ПОНЯТНЕЕ )) Димычь спасибо за труды )) !!!

[@miguelgrushetckii4839]

Крутой видос! спасибо!

[@ulaniskanderov547]

Dimych spasibo, krutoi urok!

[@bulatkhisamov8933]

спасибо!

[@user-bd4lw9hx3s]

Дмитрий лучший! Отличный курс по React - Redux! Читаем документацию! Вперед, самураи!

[@Al4ii]

ой, как я кайфую!!!

[@eugene-dmitrievich]

Спасибо большое за урок!!! Virtual DOM стал более понятным)

[@MikhailKuklenkov]

Очень понравилась простота изложения и подход. Огромное спасибо, Дима. Жирнющий лайк)

[@dimitriitkach7697]

spasibo za urok - 86 - Virtual DOM - React JS

[@STRIPPEDSTAR]

Эффективность наше все)

[@tatianakruglaya6760]

Virtual DOM - React JS здорово! Мне понравилось видео Virtual DOM - React JS. Спасибо за видос Virtual DOM - React JS. Опять все доступно объяснил про Virtual DOM - React JS. Спасибо!

[@josefk4200]

Одно из самых топовых видео на мой взгляд

[@mrmicolka]

спасибо)

[@user-jv3pm6zr2x]

класс,спасибо!

[@a_mexdiev]

спасибо

[@johnmj750]

Спасибо, Димыч!!!

[@npinskij]

Очень интересный и увлекательный урок, пол часа пролетели незаметно) Очень приятно узнавать как устроено что-либо изнутри, теперь многие старые темы заиграли новыми красками) Димыч, очередное Большое Спасибо, летим дальше 🚀 #VirtualDOM #reactJS

[@user-tf3zk3lw3q]

Отличное видео!

[@konstantinkuksov914]

virtualDom virtual DOM - разбираюсь я в нем! Спасибо, заочный ментор!

[@derrylsshowhh3249]

Движемся дальше!

[@user-pn2er2sn2e]

Virtual DOM - Полезно, интересно, понятно!))

[@eminaliyev1382]

Блин ты молодец реально , все очень хорошо объясняешь

[@esken97]

Спасибо Димыч)

[@itweb7157]

Дима, спасибо за твой труд! #Virtual #DOM - #React #JS #VirtualDOM - #ReactJS

[@user-in5qb3ml4l]

Летим !

[@marina-ej4qd9kc1wh]

Спасибо, очень хорошая лекция про Virtual DOM в React JS

[@amaxe12345]

Спасибо Димыч за твой труд! Virtual DOM - React JS #VirtualDOM #reactJS

[@vitalytochenyy481]

Круто!

[@seriogaromanchykov9451]

Спасибо за труды 2023

[@RedSkyWan]

Продолжаю изучение - 21-ый день - 86/100 Димыч, спасибо за труд!

[@edik180496]

Димыч, всё круто бомби дальше, я верю в тебя, мне кажется твоя аудитория скоро начнет расти в геометрической прогрессии) Желаю тебе удачи)

[@ITKAMASUTRA]

Спасибо!!! 🙏🚀🚀🚀

[@KirillKolchanov]

чувак, а ведь ты был прав, аудитория выросла 😃 не знаю, сколько раньше было просмотров и подписчиков, но сейчас явно охрена больше)

[@crypto4elik]

@@KirillKolchanov роликов 20 назад он случайно зашел на свой ютуб, там было 928 подписчиков на момент записи где-то 60го ролика. Сейчас 3 года спустя уже 200к )

[@KirillKolchanov]

@@crypto4elik гуд буст) вот что значит качественный контент)

[@crypto4elik]

@@KirillKolchanov согласен) а еще эти прекрасные песни в начале и конце, да и вообще Димыч человек такой живой прям. Че как оно, ты год назад писал свой коммент, устроился на работу?

[@texasviking7732]

Класс!!!

[@user-sj6tb7od6s]

спс

[@sivkaburka1062]

Досмотрел до конца