В один прекрасный день, когда я разговаривал с Sesh, он сказал: Нам нужно начать писать Framework, а не изучать Framework. Это предложение вызвало у меня энтузиазм при написании этого поста.
Я работаю над разработкой приложений React уже год. Если кто-то попросит меня объяснить, что такое виртуальный DOM, я точно смогу, тогда как если меня попросят создать виртуальный DOM, я скажу НЕТ. Но теперь это заставило меня задуматься о написании моей собственной виртуальной модели DOM.
P.S. В этом посте ничего не говорится о React Virtual DOM. Речь идет о моей истории попытки реализовать минимальную виртуальную модель DOM с использованием Plain JS.
Перед этим вот краткое введение. DOM - это объектно-ориентированное представление HTML, которое может быть изменено с помощью JS (DOM Manipulation). Иногда нам может потребоваться изменить макет и перерисовать дерево DOM, что дорого и влияет на производительность.
Для этого Facebook использует Virtual DOM (облегченную копию реальной DOM) для React. Всякий раз, когда контент изменяется, эти изменения сначала вносятся в Virtual DOM. Затем React сравнит обновленный виртуальный DOM с текущим Virtual DOM и применит только патчи к фактическому DOM, тем самым уменьшив дополнительную работу по рисованию.
Чтобы опробовать мою виртуальную модель DOM, я собираюсь создать цифровые часы со следующими требованиями.
- Время обновляется каждую секунду.
- Час Минутный разделитель и цвет (реквизит) разделителя минут и секунд обновляются каждую секунду.
- Текст будет отображаться внизу всякий раз, когда значение секунд делится на 5.
Разобьем задачу на простые задачи,
- Создал виртуальный объект DOM и отрендерил его в DOM.
- Обновите виртуальную модель DOM, сравните ее с текущей виртуальной моделью DOM и создайте список исправлений.
- Примените эти исправления к DOM.
Примечание. Я использую инструмент Chrome Paint Flashing для отслеживания и проверки перекраски.
Задание 1:
Я определил структуру Virtual DOM и построил простой пользовательский интерфейс Digital Clock.
Затем написал функцию, которая преобразует виртуальный объект DOM JS в объект DOM.
И визуализируйте этот преобразованный объект DOM.
Задача 2:
Обновите данные, свойства и макеты виртуальной DOM в соответствии с требованиями. И напишите функцию, чтобы сравнить ее с текущей виртуальной DOM и сгенерировать список исправлений.
Задача 3:
Примените изменения патча к DOM браузера согласно сгенерированному списку патчей. Та-Даааааааа
Посмотрите код здесь:
Написанный Virtual DOM не идеален. Но, написав, мы получили представление о том, как это работает.
В некоторые дни вам просто нужно создать свой собственный солнечный свет.
Спасибо за чтение! ❤️. Дайте мне знать, что вы думаете по этому поводу.
Изображение предоставлено: Фотография Сергея Жумаева из Pexels
