Виртуальный 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.

Скрытый контент (код, слайды, ...) для подписчиков. Открыть →
Дмитрий Елисеев
elisdn.ru
Комментарии (12)
Arunas

Спасибо.

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

Супер

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

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

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

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

Ответить
Алекс

Оч круто, спасибо

Ответить
Павел

Не отображаются часы, ошибок в консоли нет. Код идентичен вашему, не понимаю в чем причина...

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

Спасибо. Как вы оперируете таким количеством свойств?! К середине скринкаста я запутался и потерял нить рассуждений - нужно будет брать и по каждой строчке кода двигаться.

Ответить
S.Polessky

Дмитрий, можете добавлять в конец урока несколько задач по практике, например как в: https://learn.javascript.ru/object#tasks?

Даже подойдет описание в несколько строк, без решения. Просто Вам на порядок проще придумать эффективную задачу для практику, чем студенту. Спасибо!

Ответить
Franc Kafka

Топ контент! Начал смотреть и не смог остановиться, пришлось взять подписку

Ответить
Роман

Согласен!

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

Очень круто! Спасибо

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

Или войти через:

Yandex
MailRu
GitHub
Google