Как правильно написать функцию синхронизации виртуального DOM с отрендеренным в браузере?
Пишу реализацию фронтэнд фреймворка по курсу, но синхронизация там сделана упрощённа. А я бы хотел в целях усложнения попробовать реализовать её приближенно к реальности. Можете подсказать план, как правильно расписать алгоритм?
В курсе там просто паралелльно два цикла по нодам рекурсивно и проверяя имя тэга заменяют, обновляют, при отсутствии элемента добавляется, а если элементов больше, то они удаляются.
Я так понимаю, что нужно все элементы пронумеровать уникальным аттрибутом и использовать это в проверках. С алгоритмами и структурами данных не разбирался, поэтому не очень представляю правильный подход с древовидной структурой.
P.S Пока отложил задачу на будущее, поэтому буду благодарен, если подскажите ссылки на необходимые статьи, примеры. Из тех что находил там есть ошибки при удалении, например, но и в целом не было учета определенных ситуаций. Общие функции по рендеру дом структуры, проверки аттрибутов тэга, имени тэга написать могу, но без самого алгоритма как сравнить узлы реального и виртуального дерева - это второстепенное.
Если не делать упрощённо, а делать во взрослому - то это какбэ ноу-хау конкретных фреймворков где над удачными реализациями думают лучшие умы человечества.)
Посмотрите как сделано в Vue как предложили в ответах, как сделано в React, как сделано в менее известных фреймворках.
Мануала "как сделать рабочий серьёзный фреймворк" вы не найдёте.)
Aetae, Я понимаю, что опытные программисты залазят в исходники и смотрят реализации. Но я так сходу не понимаю с каких классов и функций начинать смотреть. Это понятно, что по сути это исполнение напрямую и влияет на производительность, что определяет популярность фреймворка. Думал, может есть какие то статьи, где чуть нагляднее рассказывают про внутреннюю реализацию, вот находил на китайском некоторые статьи по Vue.
