Очень хорошая подача контента спасибо большое. Но DOM тоже не обновляется целиком каждый раз 10:35😀. DOM использует repaint и reflow механизмы для изменения DOM структуры( это влияет на сам элемент и возможно на дочерние ) это более эффективно чем перерисовывать весь DOM целиком.
Такой себе ролик если честно. Самое важное здесь это что 1) виртуальное дерево легковеснее А остальное это вода что и все знают. Вопросы, которе меня волнуют это: 1) почему эффективнее? Перендеринг в обычном коде раз в 16 млс. Все изменения накапливаются и не сразу перерисовываются. Так же и в реакте по сути. Могу понять, что мы экономим на обращении к переменной (тегу напрямую), а не её поиске с обычным js по всему dom каждый сотый раз 2) Какие-нибудь экономии на reflow? Обычно изменения размеров 1 элемента меняют все оставшиеся в потоке ниже. Это как-нибудь регулируется?
У меня сразу пачка вопросов: что за узел? где этот узел? кто его определил? где я его могу обнаружить? то что мышкой подвигал - это не показал что такое узел. Узел - это отдельный тег html, в котором могут находиться так же под узлы, с такими же параметрами, и с такими же данными, и так может происходить до бесконечности, в виду объекта в языке js. Контейнеры, ссылки, изображения и др. - это и есть язык html. Все что включает в себя html - включает в узел react, или наоборот: один элемент html = одному узлу ) Инструмент разработчика правильно называется, а не консоль, и она предназначена исключительно только для виртуализации твоих действий, наброска, тестирования... не более того ) Кто сказал что он создает только нужные элементы??? он создает полную копию дерева! И ты можешь использовать в точности ВСЕ доступные методы из основного дерева, согласно доступным браузеру методам и свойствам. MDN, в помощь ) В общем подытожу: учить, учить и еще раз учить!
Спасибо за ваш комментарий, ваш вклад в дискуссию очень ценен. Вы верно заметили про HTML-элементы, объекты и узлы в дереве DOM, и я тоже это упоминал, когда рассматривал div (3 минута, да и в начале тоже). По поводу моего упоминания консоли - это была оговорка ( я сказал - панели разработчика вместо инструментов ). Вы абсолютно правы, что инструменты разработчика служат для виртуализации и тестирования наших действий, никто и не спорит Согласно виртуальному DOM, он действительно основан на реальном DOM, но это не полная его копия. Виртуальный DOM представляет собой упрощенную структуру данных, созданную для оптимизации обновлений пользовательского интерфейса в React. Это означает, что некоторые методы и свойства, присущие реальному DOM, вроде querySelector или innerText, отсутствуют в виртуальном DOM. Вместо этого, React предоставляет собственный API для взаимодействия с элементами на странице.
@@reactify-itДруже, очень сильно хочу изучить реакт, ещё ни разу не учил, пока только верстал. Пожалуйста, запиши курс, если можешь. И если реально планируешь, то когда сможешь это сделать?
Смысл в том что один раз загрузиться дом а потом при изменении компонента-элемента разметки с помощью процессор оптимизации реакт он определит какой элемент изменился и перезапишет его а дом браузера. Тем самым нам не приходиться постоянно перезагружать дом так как он рассказывал в доме 100000свойств и методов. Это как я понял
@@Jastioknowyt суть в том, использование VirtualDOM позволяет быстро перерисовывать RealDOM, в то время как взаимодействие с RealDOM напрямую занимает больше времени и ресурсов, потому, что RealDOM тэги, классы, айди и прочие аттрибуты - это не переменные, а дерево. Для того, чтобы найти элемент, JS перебирает полностью DOM. Чем больше элементов в дереве, например огромный список, таблица, тем дольше и сложнее происходит поиск конкретного элемента в DOM на программном уровне. А также нативные веб-технологии не предназначены для работы с большими данными.
Ого, очень занимательно и подробно рассмотрена тема, ставлю заслуженный лайк👍
Спасибо! Старался
Круто! Это, пожалуй, единственное объяснение, которое я поняла
Спасибо!
Во истину всё четко и ясно разъяснил, спасибо)
Спасибо!
Отлично объясняешь, спасибо)
Очень понятно рассказываешь, прям по полочкам все разложил
Спасибо 🔥
Спасибо! Очень приятно, что зашло!
спасибо за объяснение, стало понятно
Круто!
мое почтение!
Очень хорошая подача контента спасибо большое. Но DOM тоже не обновляется целиком каждый раз 10:35😀. DOM использует repaint и reflow механизмы для изменения DOM структуры( это влияет на сам элемент и возможно на дочерние ) это более эффективно чем перерисовывать весь DOM целиком.
Спасибо!
пушка1!
спасибо
Такой себе ролик если честно. Самое важное здесь это что
1) виртуальное дерево легковеснее
А остальное это вода что и все знают. Вопросы, которе меня волнуют это:
1) почему эффективнее? Перендеринг в обычном коде раз в 16 млс. Все изменения накапливаются и не сразу перерисовываются. Так же и в реакте по сути. Могу понять, что мы экономим на обращении к переменной (тегу напрямую), а не её поиске с обычным js по всему dom каждый сотый раз
2) Какие-нибудь экономии на reflow? Обычно изменения размеров 1 элемента меняют все оставшиеся в потоке ниже. Это как-нибудь регулируется?
Про react fiber можно?
У меня сразу пачка вопросов: что за узел? где этот узел? кто его определил? где я его могу обнаружить? то что мышкой подвигал - это не показал что такое узел. Узел - это отдельный тег html, в котором могут находиться так же под узлы, с такими же параметрами, и с такими же данными, и так может происходить до бесконечности, в виду объекта в языке js. Контейнеры, ссылки, изображения и др. - это и есть язык html. Все что включает в себя html - включает в узел react, или наоборот: один элемент html = одному узлу ) Инструмент разработчика правильно называется, а не консоль, и она предназначена исключительно только для виртуализации твоих действий, наброска, тестирования... не более того ) Кто сказал что он создает только нужные элементы??? он создает полную копию дерева! И ты можешь использовать в точности ВСЕ доступные методы из основного дерева, согласно доступным браузеру методам и свойствам. MDN, в помощь ) В общем подытожу: учить, учить и еще раз учить!
Спасибо за ваш комментарий, ваш вклад в дискуссию очень ценен. Вы верно заметили про HTML-элементы, объекты и узлы в дереве DOM, и я тоже это упоминал, когда рассматривал div (3 минута, да и в начале тоже).
По поводу моего упоминания консоли - это была оговорка ( я сказал - панели разработчика вместо инструментов ). Вы абсолютно правы, что инструменты разработчика служат для виртуализации и тестирования наших действий, никто и не спорит
Согласно виртуальному DOM, он действительно основан на реальном DOM, но это не полная его копия. Виртуальный DOM представляет собой упрощенную структуру данных, созданную для оптимизации обновлений пользовательского интерфейса в React. Это означает, что некоторые методы и свойства, присущие реальному DOM, вроде querySelector или innerText, отсутствуют в виртуальном DOM. Вместо этого, React предоставляет собственный API для взаимодействия с элементами на странице.
сделай пожалуйста структурированный курс по реакт
в скором времени планирую выпустить видео по основам react и разработать приложение небольшое, по ходу рассказывая что да как)
@@reactify-itДруже, очень сильно хочу изучить реакт, ещё ни разу не учил, пока только верстал. Пожалуйста, запиши курс, если можешь. И если реально планируешь, то когда сможешь это сделать?
@@May-yw1kb сниму на следующих выходных, и примерно тогда же и выложу)
@@May-yw1kbчувак пока он отснимет и выложит ты сможешь миллион других курсов пересмотреть или документацию перечитать
@@centralcat3325 Мне просто хочется именно у него посмотреть, нравится как он объясняет. Уверен, что для самых чайных новичков хорошо объяснит
Норм мне дураку разжува, спасибо) лайк подписка
🙌
Так и не понял смысл, по логике должно замедляется даже с virtual dom
Смысл в том что один раз загрузиться дом а потом при изменении компонента-элемента разметки с помощью процессор оптимизации реакт он определит какой элемент изменился и перезапишет его а дом браузера. Тем самым нам не приходиться постоянно перезагружать дом так как он рассказывал в доме 100000свойств и методов. Это как я понял
@@Jastioknowytg
@@Jastioknowyt суть в том, использование VirtualDOM позволяет быстро перерисовывать RealDOM, в то время как взаимодействие с RealDOM напрямую занимает больше времени и ресурсов, потому, что RealDOM тэги, классы, айди и прочие аттрибуты - это не переменные, а дерево. Для того, чтобы найти элемент, JS перебирает полностью DOM. Чем больше элементов в дереве, например огромный список, таблица, тем дольше и сложнее происходит поиск конкретного элемента в DOM на программном уровне. А также нативные веб-технологии не предназначены для работы с большими данными.
Плохо, очень расплывчато рассказано и много недосказано
Сколько же воды