ВІДКРИВАЮ ТАЄМНИЦЮ - що таке віртуальний дом, Virtual DOM? | (укр)
Вставка
- Опубліковано 27 бер 2024
- Не знаєте що таке віртуальний дом (Virtual DOM) та як він працює? Не проблема! У цьому відео, ми розповімо про найважливіші концепції щодо віртуального дома та як вони використовуються в програмуванні фронтенду. Дізнайтеся більше про цей важливий інструмент українською.
ламповий телеграм канальчик - t.me/bui_studies
Якість відосіків по реакту - ТОП 🔥🔥🔥
Дуже доступно та круто пояснив, і ще пару слів для алгоритмів ютуба!
Так тримати, дякую.
А от мені цікаво тепер. На стадії розробки ми інсталюємо Реакт. І поки ми там порсаємось з розробкою, то ми використовуємо саму бібліотеку і її можливості.
Але після деплою виходить , що там збирається сайтик і летить у якийсь хост сервіс. От по суті сайт- це ж вже тіпа інтерпретація всього нашого коду, що написаний за допомогою реакт, у код JS (бо браузер розуміє JS). І браузер він же побудує дом дерево на основі нашого коду і буде його постійно дьоргати і перерендерювати, чи ми все ж таки отримаємо "застосунок", який має змогу відкритись у браузері?
(Сподіваюсь я зміг пояснити питання своє)
1 - реакт не є чимось окремим від JS-у. не розумію нашо ти тут це розділяєш, бо весь код "на реакті" це джаваскрипт код.
2 - після деплою у збірці буде до сраки коду, частина якого це код бібліотек вказаних в dependencies, інша частина - зжатий до невпізнаваності твій код. тому працюватиме все так само як при девелопменті з єдиною різницею шо віддебажити цей код нормально буде важко.
3 - твоя питання я все ж не зрозумів, бо не вкурюю шо ти мажш на увазі отут "І браузер він же побудує дом дерево на основі нашого коду і буде його постійно дьоргати і перерендерювати, чи ми все ж таки отримаємо "застосунок", який має змогу відкритись у браузері?"
шо ти називаєш "застосунком"? чому ти виділяєш це поняття окремо від "дьоргання" і перерендеру?
Раз вже це в мене в рекомендаціях додам - що насправді це працює просто, пояснення що дане автором каналу вцілому десь вірне, але заносить джунів в бік, і потім вони через це провалюють співбесіди. Тому що думають що VirtualDOM це копія DOM. А потім я їх питаю на якому етапі робиться копія - і це провал :)
VitrualDOM це не копія DOMу - а навпаки. ViraualDOM не порівнюється з DOM-ом на жодному етапі. Раджу все таки заглубитись в тему якщо претендуєте на позицію більшу ніж слабий джун. Не заглиблюйтесь в файбери - воно вам не знадобиться ніколи.
вимушений і погодитись і не погодитись одночасно😅
погоджуюсь про те шо такого пояснення вистачить на рівень джуна-джуна, бо саме на це і розрахований контент.
не погоджуюсь із тим шо файбери не надобляться. точніше як...не знаючи про них нічого - ізі пізі можна собі жити і розробляти все життя.
особисто я після відносно неглибокого в них занурення, помітив шо став писати якісніше. не те шоб прям прорив якийсь феноменальний, проте достатній для того шоб помітив не тільки я сам🤷🏼♂
А як тоді дати правильне визначення. Підкажіть будьласка . Можна трішки розгорнутіше про 'VitrualDOM це не копія DOMу - а навпаки'
@@valentyntsymmer3286 я думаю шо мова йде про те, що VirtualDOM буде створений до того як будь який елемент попаде в DOM дерево, бо наш жабасквірт почне працювати коли в преславутому діваку з айдішкою root ще не буде нічого.
якшо мова йде саме про це, то тут теж можна доїбацця до того шо на момент виконання js-у ДОМ дерево уже існує. те шо в ньому тіки пара нещасних тегів і жодного нашого контенту, то таке, то можна опустить))
@@valentyntsymmer3286
Як воно виглядає насправді (якщо деталізовано):
0. На найпершому етапі VirtualDOM дорівнює null, в DOM нас цікавить тільки точка монтування Root - куди ми будем в майбутньому щось рендерити.
1. Під час першого рендерінгу react збирає VirtualDOM на основі дерева компонентів що ви власне створили в вашій аплікації. Назвемо це стан - A
2. Reconciliation - це етап коли react визначає які зміни відбулись в VirtualDOM - тобто ми порівнюємо A і попередній стан - який був null, різницю ми рендерим в справжній DOM - тото в DOM буде додано все дерево A
3. І далі йде повторення цього процессу, (1, 2) Тільки вже зараз наше дерево змінилось і воно тепер Б, Рекакт порівнює вже A та Б і знаходить між ними різницю (так званий патч). Тепер вже ми рендерим в DOM тільки різницю між станами A і Б - яка може бути мінімальною.
Як бачите жодного коміювання DOM, VirtualDOM ніяк не залежить від DOM. VirtualDOM живе собі окремо, і тільки коли він міняється алгоритм reconcilation визначає які зміни відбулись і рендерить їх. Це дає можливість замінити DOM взагалі на щось інше, на практиці це може бути XML дерево або інша деревоподібна структура і ми можем розробити React Native в я кому ніякого DOM-а і немає
Можливо спрощена відповідь і достатня для джуна. Та ви врахуйте нинішню конкуренцію, і з усіх хто прийде на співбесіду краще буде виглядати той хто розібрався