Виртуальный 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
Чтобы не пропускать новые эпизоды подпишитесь на наш канал @deworkerpro в Telegram
Спасибо.
Супер
на 30 минуте
name === children && name === keyне выполнится никогда. Надо заменить на "или"Верно. В репозитории код правильный.
Оч круто, спасибо
Не отображаются часы, ошибок в консоли нет. Код идентичен вашему, не понимаю в чем причина...
Код урока: https://github.com/deworkerpro/demo-what-is-react/tree/97bd7c6e92ba4602d0eb4f5814174a6832ff4fcb
Попробуйте сравнить, или этот сразу поставить.
Спасибо. Как вы оперируете таким количеством свойств?! К середине скринкаста я запутался и потерял нить рассуждений - нужно будет брать и по каждой строчке кода двигаться.
Дмитрий, можете добавлять в конец урока несколько задач по практике, например как в: https://learn.javascript.ru/object#tasks?
Даже подойдет описание в несколько строк, без решения. Просто Вам на порядок проще придумать эффективную задачу для практику, чем студенту. Спасибо!
Топ контент! Начал смотреть и не смог остановиться, пришлось взять подписку
Согласен!
Очень круто! Спасибо
Или войти через: