86 - Virtual DOM - React JS

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

[@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 не перересовывается полностью, а точечно добавляет элемент в верстку. Лучше сказать, что Реакт берет на себя те громоздкие задачи которые ты бы писал без него.

[@bugaga8144]

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

[@seriogaromanchykov9451]

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

[@IgniosTyumen]

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

[@ДимаОксентюк]

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

[@vladpobidash]

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

[@Nikita-xe5kv]

Так и делаю)

[@КонстантинАввакумцев]

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

[@ВалерияЧеблукова-з5ь]

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

[@theWorldIsMultivariate]

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

[@georgylistopad3976]

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

[@theoty-js]

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

[@ГалинаКузнецова-н1и]

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

[@MikhailKuklenkov]

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

[@slavapush]

Обожаю когда в начале роликов Дима говорит, что мы уже укомплектованы, и остается шлифовка

[@АртемийЛукин-г4ы]

Летим !

[@gusailov]

Летим)))!!! Virtual DOM - React JS 2020

[@eugene-dmitrievich]

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

[@МАКСИММЕЛЬНИК-ш8и]

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

[@ritaravinsky8262]

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

[@edik180496]

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

[@ITKAMASUTRA]

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

[@KirillKolchanov]

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

[@crypto4elik]

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

[@KirillKolchanov]

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

[@crypto4elik]

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

[@marina-ej4qd9kc1wh]

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

[@STRIPPEDSTAR]

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

[@КостяНагорный-з3д]

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

[@lomshakov]

Reconciliation - согласование

[@simongolovinskiy2959]

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

[@sergeyprivalov9442]

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

[@maximparmon9534]

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

[@ЛусінеАтаджанян]

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

[@ivanmiarkulau8320]

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

[@ВадимЛюманов]

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

[@vladimirww5152]

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

[@TRIZ-Bogatyregold]

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

[@АндрейВерещагин-т1ю]

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

[@МаксКандерский]

Жесть до куда-во, жесть до куда-во? Жесть до куда-во. Нормально

[@КонстантинАввакумцев]

'Компонента - это функция, которая принимает props и возвращает jsx разметку...' - похоже эту фразу я запомнил навсегда )))

[@nazarkornienko7242]

То чувство, когда ты еще только на 20-том видосе, а их уже 86 :D Спасибо, Димыч за видеокурс! Когда-нибудь я и сюда доберусь 😅

[@VSsoviet]

добрался?)

[@indigosay8272]

а? работа есть?)

[@peiiiajikuh]

За 2 недели добрался сюда)

[@romanpomin1967]

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

[@zeyter2768]

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

[@valeramischenko9391]

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

[@Владлен-е5ч]

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

[@martyn1716]

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

[@ringnull]

Если вы сюда дошли, то должны были прочитать всю документацию и уже перечитывать =))) аххахаха просто ржу ) Я заглядывал конечно в нее, признаю )

[@ringnull]

reconciliation - согласование между собой

[@tema_skakun]

спасибо Димыч)) мчим дальше #VirtualDOM #reactJS

[@savkaviktor]

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

[@АртемКулинский-ю4о]

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

[@janechaus4630]

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

[@MMAreflection]

Ширкано! лучшее объяснение React и Virtual DOM!

[@pashabezk]

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

[@mariia6820]

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

[@oconnor4417]

Димыч спасибо тебе огромное за труды. Добивай 2ю часть пути самурая, просим !❤😢

[@ole_oli]

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

[@АндрейФилимончик-ю9у]

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

[@АбылайЖалгасбай]

JSX превращается в настоящий React)))! Спасибо за уроки чисто от дущи от меня 100 лайков за этот сезон

[@mrchyt8861]

virtualDOM )) летим)

[@Romul3003]

По поводу читать всю документацию... а смысл? Нужно читать и закреплять практикой, сталкнулся с какой-то непоняткой - загуглил, прочитал. Иначе, если просто читать - будет каша в голове. Так как ты не знаешь, где это все применять. Все приходит с практикой, набиванием шишек и опытом. А перечитывать пройденное и уже вроде понятное - это да. Всегда находишь для себя что-то новое.

[@vladdiua]

+++

[@indigosay8272]

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

[@__online7250]

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

[@smolhs1586]

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

[@npinskij]

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

[@aleksandrzelenskiy4000]

Virtual DOM, React. Всё понятно!

[@RedSkyWan]

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

[@dmitrysvetlov6001]

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

[@ilyataldykin4698]

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

[@alexanonymous5823]

virtual DOM простыми словами=)) спасибо=))

[@sitenno7331]

Virtual DOM - React JS => ありがとうございました。

[@denkodatskyi3381]

React JS - Virtual DOM - React JS Лучшие уроки по React JS & Redux !!! The BEST!!! lessons of React & Redux!!! Programming and Coding!!! Just simply about information technology =)

[@arthacker4382]

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

[@КоровайченкоАлександр]

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

[@ollegat]

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

[@krotix4505]

Каждый день вижу как подписчики увеличиваются, то на 100, то на 200. Очень круто, что и другие люди находят такую годноту. А мы продолжаем бомбить реакт)

[@НиколайЛевченков-о8ж]

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

[@Димкинкоп]

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

[@vl8224]

Спасибо

[@konstantinkuksov914]

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

[@ГеннадийГорохов-ц8н]

Сегодня 12.12.21г Спасибо за урок Дмитрий!!!!

[@indigosay8272]

Я конечно поставил лайк, это за 5 минут можно рассказать:) Но конечно полезно рассказывать развёрнуто, спасибо

[@derrylsshowhh3249]

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

[@ulaniskanderov547]

Dimych spasibo, krutoi urok!

[@annabolbot1228]

Virtual DOM - React JS все понятно

[@oleboz95]

как в одном человеке может быть столько инофрмации ? Голова может лопнуть от этого потока информации :) виртуал дом ... Virtual DOM

[@mikhail_shokun]

Все круто #ReactJS #VirtualDOM

[@ВладПономарёв-м1ъ]

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

[@jonecramer3870]

Virtual DOM react лучшее объяснение во всём русскоязычном youtube

[@ЮлияМарченко-э1ж]

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

[@xtereone]

Димыч Красава!)

[@dob1wan174]

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

[@semial]

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

[@РусланКурбанов-и5щ]

Кони шуа! Virtual DOM React JS, Димыч красавчег!)))

[@josefk4200]

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

[@Aleks-lk1et]

Спасибо! 2022! Читаю про Reconciliation (Согласование) и иду к оптимизации.

[@amaxe12345]

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

[@dechto1]

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

[@WalterWhite-ck5rz]

Я в здравом уме пользовался командами React.createElement)) Так как на работе нельзя было установить node.js и не было интернета, писал вручную все вот это)

[@dimitriitkach7697]

spasibo za urok - 86 - Virtual DOM - React JS

[@sivkaburka1062]

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

[@alexandera7398]

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

[@ЯрославЗайченко-э3щ]

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

[@eminaliyev1382]

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

[@TatsianaChorba]

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

[@МарияВасиленко-я5к]

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

[@spacerider9426]

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

[@nspm_soul9459]

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