Free-видео из серии эпизодов "Что есть React на примере UI-фреймворка":
https://deworker.pro/edu/series/what-is-react/virtual-dom
Ранее мы упростили разработку за счёт использования иммутабельных компонентов, но получили проблемы производительности. И для решения этих проблем нам было бы неплохо сделать рендер более умным.
Этим мы сегодня и займёмся. Рассмотрим концепцию виртуального DOM и напишем оптимальный код синхронизации DOM-элементов пользовательского интерфейса без перерисовки страницы.
00:00:00 - Приветствие
00:00:53 - Проблема сброса страницы
00:01:46 - Проблемы производительности
00:02:34 - Подходы put и sync
00:03:35 - Концепция Virtual DOM
00:04:45 - Задача синхронизации
00:06:30 - Копирование контейнера
00:07:57 - Синхронизация атрибутов тегов
00:10:38 - Синхронизация текста
00:12:51 - Работа с текстом в DOM
00:18:24 - Синхронизация вложенных элементов
00:23:57 - Полноценная синхронизация
00:30:10 - Просмотр результата
00:30:59 - Проблема сравнения списков
00:35:20 - Указание уникальных ключей
00:37:36 - Анализ шагов
00:39:11 - Упрощение синтаксиса
#React