Рекурсия, древовидная структура и 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 Заключение, возможные баги и явный недостаток нынешней реализации для большого и вложенного дерева.
Ссылка на исходный код проекта: github.com/makewebme/video-ob...
⚛️⚛️⚛️
Пройди практический курс "Javascript Fullstack разработчик" от MakeWeb.me.
Детали тут: makeweb.me/course-js-fullstac...
Телеграм для связи по курсу: @makewebchatme
🛍 🛍 🛍
Поддержи проект и получи скидку 5% на 1-ю оплату хостинга/домена Reg.ru.
Промо-код: 948E-53B9-CF98-8204 (вводится во время оплаты услуги).
💬 💬 💬
Присоединяйся к нашему Telegram-чату t.me/makewebme
Пікірлер: 10
⚛⚛⚛ Пройди практический курс "Javascript Fullstack разработчик" от MakeWeb.me. Детали тут: makeweb.me/course-js-fullstack-developer Телеграм для связи по курсу: @makewebchatme
Очень крутой выпуск. Толковое и последовательное объяснение, впитал все на одном дыхании. Было бы круто увидеть TS не только с React, но и грамотное построение TS с Express, чтобы все по SOLID (без NestJS).
Спасибо огромное! Обязательно буду смотреть.
Очень понятно рассказываешь. Спасибо!
Вот что получается, когда приложение по продаже подгузников переделывают под управление беспилотных авто))) Я так из интернет магазина тайм мендеджер делал, даже название -таблиц- коллекций не менял. Инетересно, есть хоть одна причина использовать монгу, кроме как халявы на атласе?
Почему изначальную структуру на бэке не сделать на хешмапе с уникальными id? Нормализоваными данными на много легче манипулировать. И на каждый драг не нужно двигать реальные объекты, а только id. И не заметил или пропустил, покрыт ли кейс, что папку нельзя переместить в свою дочернюю папку?
@MakewebMeOfficial
2 жыл бұрын
Да, звучит как очень здравая идея. Нужно попробовать реализовать такое. Гасчет кейса - проверю как окажусь у компа. Но насчет хеш-мапа ещё скажу, что там изначально на бэке не генерировались уникальные id и не предполагалось, что будет что-то меняться. Поэтому на видео как раз этот вариант компонента по ТЗ.
@lexsxebelphegore5677
2 жыл бұрын
Имеете в виду именно hash-map или также tree-map? По сути, hash-map - внешний связный список с id и вложенными связными списками самих нод. А в текущей таске количество нод на каждом уровне вложенности может быть более одной (две, три, бесконечность). Решаю подобную проблему, поэтому интересуюсь.
@bohdan.petrov
2 жыл бұрын
@@lexsxebelphegore5677 плоская структура key:value Рутовую папку прмечаете известным id и у него в поле children массив дочерних id. И теперь рекурсивная функция по сбору дерева на UI, которая берёт начало с рутовой папки, а в сторе у вас плоский key:value
Ну найс свой велосипед запилил, правда как потом это все поддерживать это уже другой вопрос. Есть сотни библиотек для данной задачи, поэтому не вижу смысла писать своё решение, есть популярные библиотеки с готовым API которые уже прошли через тысячу issue багов и в принципе отполированы для продакшн. А здесь ну запилил ты своё решение, дальше что? Типо флексишь своим велосипедом или что? А ты подумай о бедующих разработчиков, которым нужно будет поддерживать эту кодовую базу... P.S. Я конечно не сторонник юзать одни либы, но в данном случае гораздо рациональнее было бы использовать либу, чем писать своё решение. К тому-же твоё решение не идеально, баги будут давать о себе знать 100%.