Виртуальный DOM в формате JSON

Продолжаем написание своего ReactJS. Сегодня от массивных стандартных Node-элементов перейдём к описанию компонентов с помощью облегчённых структур в формате JSON. Перепишем процедуру рендера и синхронизации на использование нового формата виртуально дерева.

  • 00:00:57 - Сложность описания вёрстки
  • 00:02:08 - Альтернативные форматы виртуального DOM-дерева
  • 00:05:28 - Вложенные элементы
  • 00:07:51 - Унификация атрибутов и props
  • 00:09:19 - Перемещение children в props
  • 00:11:32 - Переписывание Clock
  • 00:12:44 - Вывод списка лотов
  • 00:14:16 - Доработка процедуры render
  • 00:15:30 - Вычисление виртуального дерева
  • 00:19:04 - Рекурсивное выполнение функций
  • 00:20:57 - Обход дочерних элементов
  • 00:24:14 - Синхронизация атрибутов
  • 00:28:03 - Синхронизация ключа
  • 00:28:39 - Копирование текста
  • 00:29:24 - Рефакторинг цикла
  • 00:30:10 - Сравнение дочерних элементов
  • 00:30:45 - Доработка обновления и замены тэга
  • 00:33:42 - Создание реального элемента
  • 00:35:03 - Проверка результата
  • 00:36:29 - Сходство с React

А в следующем эпизоде добавим более удобные хэлперы для создания элементов по примеру самого Rect и перейдём на расширенный JSX-синтаксис в браузере с помощью Babel.

Скрытый контент
Комментарии (4)
Arunas

Спасибо.

Ответить
Александр Кулик

Супер

Ответить
Сергей

на 30 минуте name === children && name === key не выполнится никогда. Надо заменить на "или"

Ответить
Дмитрий Елисеев

Верно. В репозитории код правильный.

Ответить
Зарегистрируйтесь или войдите чтобы оставить комментарий