Задонатить и смотреть →
Открой безлимитный доступ к 100+ полезных скринкастов и получай скидки на все предстоящие мероприятия

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

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

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

Согласен!

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

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

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

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

Google
GitHub
Yandex
MailRu