Рекурсия, древовидная структура и drag-n-drop на примере реального React-компонента
В этом ролике рассказывается о реализации рекурсивных алгоритмов, drag-n-drop и древовидной (а-ля файловой) структуры в рамках разработки React-компонента под конкретное ТЗ. То есть пример максимально реалистичный.
Я постарался "на пальцах" объяснить в практическом контексте работу рекурсии. Получилось достаточно длинно, однако, для полного понимания, даже внимательного просмотра недостаточно - нужно развернуть проект и себя и пройтись по всем сложным местам с помощью дебаггера, отслеживая что происходит.
А если у вас в процессе работы появятся мысли по улучшению и фиксу возможных багов, с удовольствием приму Pull Request'ы в репозиторий с исходнками, ссылку на который вы найдёте ниже.
СОДЕРЖАНИЕ РОЛИКА:
00:00:00 Вступление. Каков функционал и ограничения компонента?
00:02:30 Структура файлов. Процедура запуска проекта.
00:05:50 Рассматриваем как работает серверный код.
00:13:15 Как на сервере генерируется исходный JSON.
00:18:56 Начинаем смотреть фронтенд-код. Хелперы и дополнительный код.
00:29:51 Рассматриваем сам компонент FileStructure.
00:32:22 Про рекурсию в этом компоненте.
00:33:36 Обзорно про хендлеры в компоненте FileStructure.
00:36:17 Первичный запрос дерева и добавление uinqueId.
00:37:25 Разбираем рекурсию на примере функции transformJSONToAddUniqueIds. Сначала по логике кода.
00:47:38 Проходимся по функции transformJSONToAddUniqueIds пошагово с помощью дебаггера в браузере.
00:58:09 Как работает скрытие-раскрытие узлов дерева?
01:03:51 Про механизм переименования узлов дерева. Рекурсия в функции переименования узла.
01:11:21 Работа функции buildTree по формированию JSX-разметки. Окончание рассмотрения переименования.
01:20:52 Drag-n-Drop. Рассматриваем функции, отвечающие за него.
01:22:42 Рекурсивные функции для вырезания запрошенной ноды и вставка её в указанное место с обновлением дерева.
01:45:21 Функция сортировки узлов дерева.
01:50:03 Заключение, возможные баги и явный недостаток нынешней реализации для большого и вложенного дерева.
Ссылка на исходный код проекта: https://github.com/makewebme/video-ob...
⚛️⚛️⚛️
Пройди практический курс "Javascript Fullstack разработчик" от MakeWeb.me.
Детали тут: https://makeweb.me/course-js-fullstac...
Телеграм для связи по курсу: @makewebchatme
🛍 🛍 🛍
Поддержи проект и получи скидку 5% на 1-ю оплату хостинга/домена Reg.ru.
Промо-код: 948E-53B9-CF98-8204 (вводится во время оплаты услуги).
💬 💬 💬
Присоединяйся к нашему Telegram-чату https://t.me/makewebme
