Как сделать рефакторинг сайта на react

Добавил пользователь Алексей Ф.
Обновлено: 31.08.2024

Этот вопрос был удалён с сайта Stack Overflow на русском в процессе модерации . Чтобы узнать возможные причины удаления вопроса, обратитесь в справочный центр.

Несколько вопросов, которые могут быть вам полезны:

как правильно устранить "запах" кода "Большой класс"?
Рефакторинг большой функции
WebStorm ecmaScript6 Почему не работает
Предпросмотр картинок в Webstorm?
В WebStorm пропало автодополние
autosave webstorm

Если вы думаете, что здесь чего-то не хватает, свяжитесь с нами.

React-разработчики создают приложения на React, используя дополнительные инструменты: например, Redux, TypeScript или Jest. Это востребованная работа: на React.JS написаны Яндекс, Netflix, Facebook и другие известные сервисы. Фронтенд-разработчик в Яндекс.Практикуме Давид Роганов рассказал, что такое React, и составил гид для его изучения.

Что такое React

Вскоре после появления React и подобные ему решения (Vue.js, Svelte) практически захватили мир фронтенда: потому что они помогают решать проблемы, основываясь на идее декларативного программирования, а не на императивном подходе.

Декларативный подход состоит в описании конечного результата (что мы хотим получить).
При императивном подходе описываются конкретные шаги для достижения конечного результата (как мы хотим что-то получить).

Оказалось, что декларативный подход отлично подходит для создания интерфейсов, и он прижился в сообществе. Этот подход работает не только в вебе: сравнительно недавно компания Apple представила фреймворк SwiftUI, основанный на тех же принципах.

Чтобы лучше понять, о чём идёт речь, рассмотрим императивный и декларативный подходы на примерах. Напишем две версии простого приложения: на HTML и JS (императивный подход) и на React (декларативный подход). Наша программа будет показывать число и кнопку, и при нажатии на неё исходное число будет увеличиваться на единицу.

Приложение на чистом HTML и JS

В рамках императивного подхода пошаговые инструкции для создания программы выглядят так:

объявляем начальные значения программы: присвоили константам ссылки на DOM-элементы, устанавливаем начальное значение счётчика;
пишем обработчик increment, в котором мы увеличиваем текущее значение, и устанавливаем его в соответствующий элемент;
устанавливаем начальное значение счётчика (0);
устанавливаем обработчик для кнопки.

Обратите внимание, что HTML-разметка и JS-логика хранятся отдельно друг от друга.

Приложение на React

Из-за специфики библиотеки код на React может выглядеть непривычно для того, кто пишет на JavaScript: потому что в тэге практически нет вёрстки. Но сосредоточимся непосредственно на приложении-счётчике: его основная логика находится на строках 25-40.

Вот, что в нём происходит:

Весь код находится внутри функции App. В React она и другие похожие функции называются компонентами. Компонент — это фрагмент интерфейса, который содержит разметку и, при необходимости, связанную с ней логику. Все React-приложения строятся на компонентах. При этом сам компонентный подход появился задолго до React, но здесь его совместили с декларативностью.

Сравнение двух вариантов приложения

В первом случае мы написали алгоритм для работы с элементами, значением и его изменения — шаги, необходимые для достижения результата.

Во втором, используя JSX-разметку и вспомогательные функции React, мы сразу описали результат, который хотим видеть. В этом и заключается отличие декларативного подхода от императивного.

Если сравнивать эти два приложения, то при использовании React можно выделить такие особенности:

Разметка и относящаяся к ней логика находятся рядом и связаны друг с другом. Это упрощает дальнейшую работу с кодом.
Выделен счётчик с кнопкой в компонент. Это значит, что мы можем очень легко его переиспользовать: достаточно на 44 строке написать ещё один тег , и на странице появятся уже два независимых друг от друга счётчика.
Больше не нужно использовать идентификаторы для обращения к DOM-элементам, что также делает код более легко поддерживаемым.
Состояние компонента изолировано: нет никакой возможности модифицировать значение извне, если мы явно такое не задумывали. Благодаря этому поток данных в приложении становится более предсказуемым, что упрощает разработку и отладку.

Также стоит отметить, что в React-приложениях мы не работаем напрямую с DOM-деревом. Вместо этого мы описываем разметку с помощью JSX, а React уже сам решает, как превратить её в реальные DOM-элементы. Это становится возможно благодаря абстракции, которая называется виртуальный DOM.

Раньше в различных статьях часто можно было встретить заблуждение, что благодаря виртуальному DOM React быстрый. Следует понимать, что при прочих равных React-приложение не может быть быстрее того, что написано на чистом JS хотя бы потому, что сам React написан и выполняется на JS.

Особенности React

React — это не универсальный инструмент, который подойдёт для любого проекта. Чтобы понять, решит ли React ваши задачи, важно знать о его преимуществах и недостатках.

Эта библиотека действительно может упростить жизнь разработчикам:

Однако при использовании React есть особенности, которые важно учитывать:

Эти недостатки, конечно, не повод совсем отказаться от использования React и подобных ему библиотек при создании проектов. Но о них нужно помнить для того, чтобы использовать этот инструмент осознанно и понимая его ограничения.

Несмотря на то, что виртуальное дерево расходует дополнительные время и память, для большинства приложений это некритично: React остаётся достаточно быстрым и позволяет оптимизировать проблемные места там, где это нужно.

Что касается порога входа, то изучение React или подобных ему библиотек стоит рассматривать как инвестицию в себя, как в разработчика, потому что это актуальная, интересная и широко используемая технология.

Для каких проектов подойдёт React

Резюмируя все особенности, можно выделить несколько типов проектов, которым подойдет React.

Если проект планирует расширяться, и над ним работает или будет работать команда разработчиков. Потому что в таком случае использование известной технологии поможет проще договариваться между разработчиками и лучше поддерживать код.
Средним и крупным проектам будет полезен компонентный подход, который в том числе лежит в основах React. Это упростит структурирование и переиспользование кода и даст выигрыш в долгосрочной перспективе.
Legacy-проектам, которым предстоит пройти через рефакторинг. Потому что React можно добавлять в уже существующий проект, обновляя кодовую базу постепенно и точечно.

React, возможно, не подойдет для простых приложений (одностраничных и одноразовых сайтов), потому что в этом случае для того, чтобы разобраться с настройкой проекта и окружения, уже понадобится много времени и труда.

Ещё React будет не самым удачным выбором для реализации частей проекта, которые очень чувствительны к потребляемым ресурсам. В этом случае возможно гибридное использование: когда само приложение по большей части написано на React, а требовательные к производительности места с ним не взаимодействуют – библиотека никак не мешает делать такие интеграции. Однако и тут следует подходить к вопросу без фанатизма: React достаточно быстрый в большинстве случаев, а оптимизировать узкие места всегда можно по факту.

Как изучить React

Один из наиболее полных и удачных ресурсов для первого знакомства и изучения React — это официальный сайт библиотеки. Он переведён сообществом на русский язык и поддерживается в актуальном состоянии. Если вы знаете английский, то стоит смотреть англоязычную версию. Тут логика такая же, как и с другими областями программирования — в англоязычном интернете гораздо больше информации, и она ближе к первоисточникам.

План изучения React может выглядеть так:

— способы подключения React к проекту;

— знакомство с JSX;

— знакомство с компонентами: стейт, пропсы, жизненный цикл;

— виды компонентов: классы и функциональные компоненты, их отличия;

— работа с формами;

— разработка простого приложения на React.

— React хуки, кастомные хуки, рефы.

— Популярные шаблоны: HOCs, render props, глупые/умные компоненты, controlled/uncontrolled components.

— сторонние библиотеки (redux, mobx и другие).

Диагностика проблем с производительностью, использование профайлера и оптимизация приложений на React.

Более продвинутые концепции:

— принципы интеграции с другими js-библиотеками;

— lazy loading компонентов;

Изучение работы под капотом:

— виртуальное дерево и алгоритм reconciliation;

— понимание концепций и устройства reconciler и renderer;

— написание своего рендерера.

Почти все эти темы можно изучить на официальном сайте React.

Кроме этих ресурсов, на рынке много онлайн-курсов разной степени интенсивности и наполнения. Есть комплексные курсы, которые с нуля погрузят студента в экосистему React. Есть и те, которые сосредоточены на очень конкретных вещах, например, на использовании разных шаблонов или менеджеров состояния.

Почему сейчас стоит изучать React

Во-первых, React — это популярная библиотека, которая ещё долго будет актуальной. Это значит, что всегда можно найти проект, написанный на React, и поработать на нём. А на людей, которые хорошо разбираются в React, есть спрос на рынке.

Во-вторых, это целый дивный новый мир со своим огромным сообществом. React помогает взглянуть на разработку интерфейсов совершенно по-другому — через призму декларативного программирования. Это полезно для общего развития и расширения кругозора, а полученные знания упростят изучение других подобных библиотек и технологий (Vue.js, Svelte или даже SwiftUI). Кроме этого, многие принятые в сообществе соглашения, шаблоны и подходы сами по себе помогают писать более хороший и поддерживаемый код.

Но также важно понимать, что React — это библиотека на языке JS. И прежде чем изучать React, нужно на хорошем уровне овладеть JS, HTML и CSS. Это ускорит освоение React, а также повысит ценность разработчика на рынке: потому что знание фундаментальных вещей помогает подобрать технологию, лучше всего подходящую для решаемой задачи — будь то React или что-то другое.

Рефакторинг — это контролируемый процесс улучшения кода, без написания новой функциональности. Результат рефакторинга — это чистый код и простой дизайн.

Грязный код

Грязный код является не только результатом лени и невежества, но и побочным продуктом частых изменений в процессе разработки.

Чистый код

Чистый код — это код, который просто читать, понимать и поддерживать. Чистый код улучшает предсказуемость разработки и повышает качество продукта.

Процесс рефакторинга

Пошаговые изменения, сопровождаемые частыми запусками тестов — это то, что делает процесс рефакторинга эффективным и безопасным.

Запахи кода

Техники рефакторинга

Техники рефакторинга описывают конкретные методы борьбы с грязным кодом. Большинство рефакторингов имеет как достоинства, так и недостатки. Поэтому любой рефакторинг должен быть мотивирован и обдуман.

Премиум Онлайн Курс

Сегодня есть много технологий для создание сайтов. Ты можешь написать либо на HTML, CSS, JavaScript, или вообще использовать какую либо CMS.

Одним из способов является создание сайта через React.js.

В настоящее время React.js является одним из самых популярных фреймворков, которую многие считают полезным для изучения и создания сложных сайтов. После освоения теории наступает время практики, и это может показаться немножко сложным, так как не знаешь как начать, как получить данные, как их отобразить.

Читайте также: