86 - Virtual DOM - React JS
HTML-код
- Опубликовано: 7 сен 2024
- it-incubator.i... - человекоориентированное, честное и профессиональное обучение front-end и back-end разработке гарантированно до трудоустройства за фиксированную стоимость.
Поддержать меня и получить доступ к дополнительному контенту можно вот здесь:
/ itkamasutra
Помогайте друг другу вот здесь: t.me/reactjs_s...
API: social-network...
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
* Мы в соц. сетях:
itkamas...
/ itkamasutra
telegram.me/it...
* Мои личные VK и Insta:
d.kuzyu...
/ it.kamasutra.dimych
#VirtualDOM #reactJS
Проблема любой документации это, то что она рассчитана не на начинающего разработчика, по этому при чтении ее я не то что бы понимал о чем там написано, я не понимал даже некоторые примеры которые там описываются. Соответственно это мне напоминало перевод текста с иностранного языка на русский с словарем. Другое дело когда рассказывает Димыч, как для детей, на элементарном уровне, все усваивается легко и просто. Спасибо за труды
Отчет по уроку:
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
2й пункт не правильный, DOM не перересовывается полностью, а точечно добавляет элемент в верстку. Лучше сказать, что Реакт берет на себя те громоздкие задачи которые ты бы писал без него.
Многое не новое, т.к документация зачитывалась до дыр + литература начинается с этой темы, но за 35 минут объяснено так, что документация теперь не рождает вопросов=) Лайк за лучшие уроки по ReactJS, VirtualDOM и такой марафон по курсу!
Блин это реально лучшее обьяснение концепции работы React. Просто как боженька по полочкам все разложил, даже Babel затронул. А для гуманитариев это просто подарок.
Очень интересно про Virtual DOM , теперь понимаю как это работает. Спасибо!
Спасибо за урок, попытался понять и объяснить эту тему своей сестре... Если вы думаете что то-то знаете и понимаете, попытайтесь объяснить эту тему 15 летней школьнице, которая понятия не имеет как и что работает.
Вы откроете для себя, что не так уж много вы и знаете) зато потом на совбесе как-то нужно будет еще это и красиво объяснить.
В общем, пытайтесь проговаривать все что учите, это реально помогает понять пробелы и научиться красиво говорить.
После такого лучше понимаешь на сколько крут Димыч и как много знает и умеет это пояснить!
Так и делаю)
ага.. когда к собеседованию готовлюсь жене рассказываю .. что нить про ospf или bgp (жена в школе работает если что ). И по ее глазам сразу становится понятно сам то я знаю тему или нет )
15 летняя школьница, обращайся, могу объяснить)
О как же мне понравился урок, как будто сказку прослушала.Спасибо Дима!!!
Димыч, всё круто бомби дальше, я верю в тебя, мне кажется твоя аудитория скоро начнет расти в геометрической прогрессии) Желаю тебе удачи)
Спасибо!!! 🙏🚀🚀🚀
чувак, а ведь ты был прав, аудитория выросла 😃 не знаю, сколько раньше было просмотров и подписчиков, но сейчас явно охрена больше)
@@KirillKolchanov роликов 20 назад он случайно зашел на свой ютуб, там было 928 подписчиков на момент записи где-то 60го ролика. Сейчас 3 года спустя уже 200к )
@@crypto4elik гуд буст) вот что значит качественный контент)
@@KirillKolchanov согласен) а еще эти прекрасные песни в начале и конце, да и вообще Димыч человек такой живой прям. Че как оно, ты год назад писал свой коммент, устроился на работу?
Очень понравилась простота изложения и подход. Огромное спасибо, Дима. Жирнющий лайк)
лучшее что можно найти по virtual dom
Я тебя люблю, ты первый на кого я подписался и поставил лайк и написал комментарий искренне. Спасибо за контент и твою манеру речи ❤
Спасибо, очень круто объяснил! Мне кажется это стоит давать на первых уроках.
Это лучшее видео на тему работы Реакта. Димыч просто талант и прирожденный педагог! Спасибо огромное, долго эта тема у меня была неразобрана, но теперь все встало на свои места в голове.
То чувство, когда ты еще только на 20-том видосе, а их уже 86 :D
Спасибо, Димыч за видеокурс! Когда-нибудь я и сюда доберусь 😅
добрался?)
а? работа есть?)
За 2 недели добрался сюда)
Спасибо большое за урок!!! Virtual DOM стал более понятным)
33:22 - в примере с key использованы университеты-чемпионы американской студенческой лиги по баскетболу (NCAA). Не знаю зачем вам эта информация, я просто перезанимался, походу.
Virtual DOM - React JS - после этого урока стал мне ЕЩЁ ПОНЯТНЕЕ )) Димычь спасибо за труды )) !!!
Дима, у тебя определенно есть талант по подробному и понятному объяснению не самого легкого материала! Тема Virtual DOM и обычного DOM теперь намного лучше понимается. Большое спасибо за твою работу! Это точно лучший полный курс по React JS. Подтягиваем нативный JavaScript
Все разложилось по полочкам и встало на свои места - DOM, VirtualDOM, React, Babel, JSX. Респект автору)
Очень интересный и увлекательный урок, пол часа пролетели незаметно)
Очень приятно узнавать как устроено что-либо изнутри,
теперь многие старые темы заиграли новыми красками)
Димыч, очередное Большое Спасибо, летим дальше 🚀
#VirtualDOM #reactJS
Дойдя до этого выпуска хотел бы поблагодарить автора за такой прекрасный курс. Есть опыт разработки на другом языке и пришел сюда чтобы познакомиться с фреймворком. Но тут обьясняется нечто большее, реакт оказывается и не нужен, нужны архитектурные подходы, спасибо тебе за них большое, пересмотрел концепции разработки и благодаря тебе стал только лучше не только в знании фронтенда и бекенда, но и в направлении разработки на том языке, на котором пишу)
Спасибо, очень хорошая лекция про Virtual DOM в React JS
Димыч спасибо за лекцию про VDOM! Полезно! Запомнил слово reconciliation - сравнение/соглавсование VDOM и DOM!
Как же круто объяснено!!
Спасибо большое!
Если вы сюда дошли, то должны были прочитать всю документацию и уже перечитывать =))) аххахаха просто ржу ) Я заглядывал конечно в нее, признаю )
Доходчиво,четко и как всегда без воды!Лучшее объяснение Virtual DOM React Js
очень доходчивое объяснение Virtual DOM особенно в купе с документашкой про reconcilation!!! Читайте документацию))) люблю эту фразу)
Обожаю когда в начале роликов Дима говорит, что мы уже укомплектованы, и остается шлифовка
Не устану благодарить за самые крутые и понятные лекции по Реакт! Большое спасибо, Дмитрий, за легкую подачу)
Подучу ка я реакт что б потом херяк херяк
Нигде еще не встречал настолько толкового обьяснения, даже записал себе основные аспекты. Спасибо! Лойс!
Летим !
Классно всё разложил!)
Огонь! Спасибо
Летим)))!!!
Virtual DOM - React JS
2020
Ха, мой лайк был 2000-ым )) Самый крутой курс по React!
Эффективность наше все)
Спасибо за труды 2023
Очень доступное объяснение, как и всегда) Летим дальше!!)))
Димычьб спасибо, всё очень круто!!! React, Redux, Virtual Dom. Бомбим дальше!!!
Как же легко зашло видео, когда уже несколько раз посмотрел 100-ый выпуск)
Все круто
#ReactJS #VirtualDOM
Как всегда крутое объяснение! Кажется. что все очень просто)
Virtual DOM !
Все супер! Летим дальше!))))
Димыч, спасибо!
Спасибо за урок
2022. Спасибо большое! Много всего, что уже знал, но полезно собрать снова все в кучу. Плюс пару моментов про оптимизацию тоже узнал
Димыч спасибо тебе огромное за труды. Добивай 2ю часть пути самурая, просим !❤😢
все по полочкам, спасибо Дима
'Компонента - это функция, которая принимает props и возвращает jsx разметку...' - похоже эту фразу я запомнил навсегда )))
JSX превращается в настоящий React)))!
Спасибо за уроки чисто от дущи от меня 100 лайков за этот сезон
Дмитрий лучший! Отличный курс по React - Redux! Читаем документацию! Вперед, самураи!
Уххх осталось немного, супер объяснение, спасибо тебе за твой труд, спасибо за все, летим ...
Продолжаю изучение - 21-ый день - 86/100
Димыч, спасибо за труд!
Ширкано! лучшее объяснение React и Virtual DOM!
спасибо Димыч)) мчим дальше
#VirtualDOM #reactJS
React JS - Virtual DOM - React JS
Лучшие уроки по React JS & Redux !!!
The BEST!!! lessons of React & Redux!!!
Programming and Coding!!!
Just simply about information technology =)
Virtual DOM
Document Object Model
Компонент возвращает jsx разметку, разметка транспилируется в js который генерирует html разметку, браузер парсит html страничку и создает DOM дерево, на базе этого дерева браузер создает визуализацию
knockout.js перерисовывал всю страницу каждый раз при изменениях в DOM
потом пришел React и говорит давайте я возьму на себя контроль за DOM элементами
VirtualDOM - упрощенные промежуточные обьекты при изменении которыз не происходит перерисовки страницы
Reconciliation
когда компонент хочет перерисоваться он возвращает реакту новую jsx разметку, реакт создает новую версию VirtualDOM (условно дешев), после реакт делает Reconciliation - быстрыми алгоритмами сравнивает старую версию Virtual DOM и новую, и на базе найденных отличий (если отличия есть) точечно обновляет части реального (не virtual) DOM
document.createElement создает елемент настоящего DOM
React.createElement создает елемент virtual DOM
оптимизация благодаря ключам (key) в списках
babeljs.io - babel onlline
Круто Спасибо!
React Redux
спасибо, помог)!!
на каждое видео бы такой краткий конспектик в комментах, спасибо
Каждый день вижу как подписчики увеличиваются, то на 100, то на 200. Очень круто, что и другие люди находят такую годноту. А мы продолжаем бомбить реакт)
Димыч Красава!)
virtual DOM простыми словами=)) спасибо=))
Лучший курс! Спасибо💪
Спасибо за рассказ о работе virtualDOM в React. Всё предельно ясно)
Спасибо
Хороший базовый урок по Vitrual DOM. Спасибо
Это просто пушка, я как будто впервые мир увидел. Отличное объяснение. Спасибо.
лучшее объяснение по VirtualDom, из тех, что я видел
Reconciliation - согласование
Virtual DOM, React. Всё понятно!
крутой урок , бомби дальше😀
Dimych spasibo, krutoi urok!
Было очень интересно) освежила в памяти информацию про virtual DOM. Спасибо за урок)
Virtual DOM - Полезно, интересно, понятно!))
Я конечно поставил лайк, это за 5 минут можно рассказать:) Но конечно полезно рассказывать развёрнуто, спасибо
reconsilation - это примирение. думаю это слово в лекции дало бы плюс к карме :)
или согласование, как в официальной документации. Это как согласовать различия между старой версией DOM и новой)
лично для меня этот видос был рили полезным и много нового узнал!! спасибо!!
Virtual DOM , React , JS , Redux , Java Script
летим дальше!
Virtual DOM - React JS => ありがとうございました。
virtualDOM )) летим)
Спасибо за урок, Димыч!
Про Virtual DOM теперь стало понятно еще больше
Я в здравом уме пользовался командами React.createElement))
Так как на работе нельзя было установить node.js и не было интернета, писал вручную все вот это)
Жесть до куда-во, жесть до куда-во? Жесть до куда-во. Нормально
Спасибо! 2022! Читаю про Reconciliation (Согласование) и иду к оптимизации.
Это было весьма занимательно, спасибо!
Дима, спасибо
virtualDom virtual DOM - разбираюсь я в нем! Спасибо, заочный ментор!
reconciliation - согласование между собой
как в одном человеке может быть столько инофрмации ? Голова может лопнуть от этого потока информации :) виртуал дом ... Virtual DOM
Спасибо Димыч за твой труд! Virtual DOM - React JS #VirtualDOM #reactJS
Спасибо огромное за твой труд! Смотрю дальше!
Отлично, Димыч! Выучу Java Script, устроюсь на работу React JS разработчиком и с первой зп поддержу твой проект!
Хоть видосов осталось буквально несколько, но мой собственный календарь говорит, что первый собез будет не раньше чем через 2 месяца.
Будет время поднатоскаться, какраз базу по Node.js , express и Mongo можно посмотреть. Ну это так, чтоб понимать как работает API
Было полезно, было интересно! Virtual DOM, React, JS
Досмотрел до конца
Отличное видео, Димыч!!! Очень хорошо, что ты рисуешь. Визуальное мышление - это большой плюс. Мне так всегда понятнее (имхо). Работал на разных проектах и все время вспоминаю одного чела (Хави), он любил рисовать все на доске... И зато после не оставалось почти вопросов, берешь тикет из Jira и херачишь код))) . Димыч, ты молодец
Сегодня 12.12.21г Спасибо за урок Дмитрий!!!!
Одно из самых топовых видео на мой взгляд
"Это нативный JavaScript, который вам знать особо не нужно". Димыч, не надо так :(
согласен. +1
Вот так и рождаются RUclips-программисты )) которых потом сц...ми тряпками гнать нужно. Помню собеседовал таких знающих JQuery не знающих JS. Вся мощь YouTub-a рождать раков. Печаль, ох печаль.
Для начала выучи JS а потом лезь в дебри мимолетно живущих либ (JQuery вам в пример, React ждет тоже через пару лет).
@@andreyserbin3957 А ты сам для себя ответь ты знаешь весь js?Пока ты роешься в чистом js другие уже давно сделали готовое приложение.
@@frallen9787 Суть в том что да я знаю чистый JS и не один год конечно не на уровне бога но и мидлам могу нос утереть. Дмитрия смотрю в целях понять поверхностно React (как раз досматриваю 97 выпуск), респект и уважуха ему.
@@andreyserbin3957 Те кто давно уже не junior часто зазнаются,тыкают новичков типо "хаха нуб" и тд,забывая с чего начинали.
ой, как я кайфую!!!
Спасибо, Димыч! Отличное видео, всё ясно и доступно. Отдельное спасибо, за то что напоминаешь каждый раз читать доки и всё такое, это конечно помогает держать себя в тонусе!
Virtual DOM - React JS все понятно
спасибо огромное тебе мужик, лучшие курсы по реакту
Virtual DOM react лучшее объяснение во всём русскоязычном youtube