Недавно я опубликовал запись в блоге (вы можете прочитать ее здесь) о созданном мной приложении под названием Super Movie Library. Я горжусь тем, что он работает именно так, как я себе это представлял. Теперь пришло время отполировать его. Давайте просмотрим мой код и посмотрим, что я могу найти.
О, мальчик, это не выглядит очень СУХИМ для меня. И, похоже, он ведет себя не так, как должна вести себя домашняя страница. Нужно ли отображать каждый путь на панели навигации? Могу ли я сделать этот один компонент с раскрывающимся меню, чтобы внести необходимые изменения? Другими словами, это дает сильный запах кода.
Давайте начнем с простого и переименуем этот компонент во что-нибудь более подходящее, например, «Обзор». Я меняю компонент и файл на новое имя и вижу:
Все в порядке, дыши глубже. Это все часть процесса рефакторинга. К тому времени, когда я закончу, сайт будет лучше, чем когда-либо. Как только я обновил импорт в родительском компоненте App.js, все заработало как надо.
Рефакторинг может пугать начинающих программистов. Вы только что создали это приложение, и оно отлично работает. Зачем менять? Особенно, если вы сломаете его в процессе. Что делать, если вы не можете заставить его работать, как раньше?
Доверьтесь своим навыкам. Вы получили это приложение для работы. Вы боролись с ошибками, ошибками и синтаксисом, чтобы сделать то, чего раньше не было! Вы сделали это раньше, и вы можете сделать это снова! Я верю в тебя!
Ладно, хватит болтовни. Вернемся к рефакторингу. Затем я удалю несколько маршрутов, ведущих к одному и тому же компоненту, и заменю домашний маршрут заполнителем.
Теперь, когда я изменил маршруты, у меня есть мертвые ссылки в моей панели навигации! Грр!
Впрочем, ничего страшного. Я вспомнил свое дыхание и теперь я спокойная река…
Это тоже быстрое решение. Просто удалите мертвые ссылки и замените их моей новой активной, которая ведет к «/browse».
Теперь я все еще хочу, чтобы пользователь мог просматривать по разным критериям. Я предоставлю им возможность, разместив раскрывающийся список на странице. Когда пользователь изменит это, он изменит, какие фильмы будут отображаться на странице. Идеальный план!
Поскольку мы вносим изменения внутри компонента, нам больше не нужна эта конечная точка в качестве реквизита, поэтому я ее удаляю.
И снова ломается. Не беспокойся! Не первое мое родео! Чтобы сделать омлет, нужно разбить несколько яиц!
Давайте создадим новый компонент для этого раскрывающегося списка.
Затем мы импортируем его в наш родительский компонент, компонент Browse, и включим его в возвращенный JSX.
Теперь мы собираемся сделать переменную «конечная точка» с состоянием в компоненте «Обзор» и передать функцию установки нашему дочернему элементу, EndpointDropdown. Это делается для того, чтобы EndpointDropdown мог передавать информацию родительскому элементу при изменении конечной точки.
Теперь мы можем использовать функцию setEndpoint в качестве реквизита и передать ее нашему компоненту. В результате получается код, который работает точно так же, более интуитивно понятен и с ним проще работать разработчикам, незнакомым с проектом. Успех!
Мне еще предстоит проделать некоторую работу по созданию новой домашней страницы, поэтому я пока не буду вносить свои изменения в Heroku, но мое приложение на один шаг ближе к тому, чтобы быть лучшим, каким оно может быть!
Я надеюсь, что если я смогу преодолеть проблему, которая ломает ваш код, чтобы сделать его лучше, то и вы сможете!
