ChatGPT на русском языке, бесплатноНовости и обновления в Telegram
На sponsr есть решения ваших задач
Полезные видео о фронтенде. Подпишись на Rutube
Современная программная инженерия — Часть 1: Проектирование систем
год назад·11 мин. на чтение
Серия статей о современной разработке программного обеспечения
В ранние времена (конце 80-х и начале 90-х) разработка программного обеспечения в основном заключалась в программном обеспечении, которое работало локально на вашем компьютере или на мейнфреймах со значительно большей вычислительной мощностью, если у вас был к нему доступ.
Сегодня большая часть разрабатываемого программного обеспечения либо работает в облаке, либо работает на устройстве, требующем доступа к облаку, либо поддерживает другое программное обеспечение, которое также работает в облаке. Очень редко случается работать над программной системой, которая работает в ограниченном пространстве (например, встроенные программные системы), которые не имеют доступа к более мощной вычислительной платформе в другом месте. Системы бухгалтерского учета теперь обрабатывают кучи данных, размещенных на собственном железе либо в хранилище данных. В системах продаж теперь отношения с клиентами управляются третьей стороной с помощью плагинов, разработанных еще большим количеством сторонних или собственных разработчиков.
Но как эти программные системы создаются сегодня, чтобы обслуживать сотни миллионов пользователей, сохраняя при этом производительность и отзывчивость, которые мы привыкли ожидать от программного обеспечения?
В этой статье поговорим о системном проектировании, о том, как оно стал важной частью современной практики разработки программного обеспечения и как оно станет одной из ключевых областей, в которых инженеры-программисты все еще могут приносить пользу в краткосрочной и среднесрочной перспективе.
Важность проектирования систем
Проектирование системы включает в себя понимание ограничений, при которых система должна выполнять свою функцию, каковы требуемые функции и какие свойства системы важно сохранить по отношению ко всем другим свойствам. После того, как вы определили их, вы можете приступить к проектированию системы, отвечающей требованиям, и систематически планировать доставку решения.Компоненты проектирования системы
Когда мы говорим о проектировании системы, обычно это влечет за собой несколько компонентов:- Архитектура — как выглядит решение в целом? Включает ли он в себя несколько подсистем? Есть ли отдельные компоненты, составляющие единое целое? Как они взаимодействуют и как они связаны друг с другом?
- Топология — есть ли в решении многоуровневая структура? Если это распределенная система, то где службы компонентов расположены физически или логически по отношению друг к другу?
- Низкоуровневое проектирование — Какие интерфейсы вы определили, через которые взаимодействуют различные части систем? Существуют ли конкретные алгоритмы, которые вы используете для решения ключевых аспектов решения (производительность, эффективность, пропускная способность, устойчивость и т. д.)?
Принципы проектирования системы
Современные системы нуждаются в масштабировании — от однопользовательской системы до системы, которая должна быть в состоянии обрабатывать тысячи и даже миллионы пользователей одновременно. Поэтому появились несколько ключевых принципов проектирования программных систем. Вот некоторые из них, которые мы рассмотрим в этой статье:- Масштабируемость
- Надёжность
- Поддерживаемость
- Доступность
- Безопасность
Масштабируемость
Система является масштабируемой, если она может быть развернута для обработки роста нагрузки при пропорциональном росте ресурсов. Коэффициент масштабирования системы определяется как рост количества ресурсов, необходимых для обслуживания, рост нагрузки на систему. Мы сталкиваемся с двумя типичными случаями масштабирования с программными системами: вертикальное масштабирование и горизонтальное масштабирование. Вертикальное масштабирование относится к предоставлению программной системе большего запаса или ресурсов одного компьютера для обработки растущих требований. Рассмотрим случай сетевого устройства хранения данных. Чем больше места для хранения вы предоставляете с помощью устройства, тем больше данных оно может хранить. Если он необходим для обработки большего количества одновременных подключений и операций ввода-вывода (IOPS), обычно требуется добавить больше вычислительной мощности и сетевых интерфейсов, чтобы справиться с возросшей нагрузкой. Горизонтальное масштабирование относится к репликации системы или нескольких компьютеров с копиями программного обеспечения для обработки растущих требований. Рассмотрим случай сервера статического веб-содержимого, скрытого за подсистемой балансировки нагрузки. Добавление дополнительных серверов позволяет большему количеству клиентов подключаться и загружать контент с веб-серверов, а когда нагрузка спадает, количество веб-серверов может быть уменьшено до нужного размера для текущего спроса. Некоторые системы могут обрабатывать гибридное или диагональное масштабирование. Например, некоторые архитектуры распределенных баз данных позволяют разделять вычислительные узлы и узлы хранения, чтобы рабочие нагрузки с большими вычислительными ресурсами могли использовать узлы с большим количеством вычислительных ресурсов. В отличие от этого, тяжелые рабочие нагрузки операций ввода-вывода в секунду могут выполняться на узлах хранилища + вычислений. Например, приложения потоковой обработки могут разделять рабочие нагрузки, требующие больше памяти и вычислительных ресурсов (например, рабочие нагрузки поиска событий или аналитики), и масштабировать их соответствующим образом и независимо от тяжелых рабочих нагрузок операций ввода-вывода в секунду (например, сжатие и архивирование).Надёжность
Система надежна, когда она может выдержать частичный отказ и восстановление без серьезного ухудшения качества обслуживания. Часть надежности системы включает в себя предсказуемость ее операций с точки зрения задержки, пропускной способности и соблюдения согласованного диапазона операций. Обычные подходы к обеспечению надежности системы включают следующее:- Настройка резервирования системы для поддержки прозрачного или минимального аварийного переключения.
- Создание отказоустойчивости в случае внутренних ошибок или сбоев, вызванных вводом.
- Четкое определение контрактов и целевых показателей задержки, пропускной способности и доступности.
- Создание достаточных резервных мощностей для удовлетворения всплесков и органического роста нагрузки.
- Гарантии качества обслуживания для обеспечения соблюдения ограничений скорости и изоляции клиентов/операций.
- Реализация корректной деградации службы в сценариях перегрузки или катастрофического сбоя.
Поддерживаемость
Система пригодна для обслуживания, если она изменяется с соразмерными усилиями и развертывается с минимальным вмешательством пользователя. Для этого необходимо внедрить систему таким образом, чтобы предположить, что требования будут меняться, и что она достаточно гибкая, чтобы справляться с предсказуемыми изменениями. Это также означает обеспечение того, чтобы код был читабельным, чтобы следующий набор сопровождающих (которые могут быть той же командой, но смотрят на это новыми глазами в будущем) мог поддерживать программное обеспечение и развивать его для удовлетворения будущих потребностей. Никто не хочет застрять на обслуживании программного обеспечения, которое является жестким, трудно изменяемым, плохо организованным, плохо документированным, плохо спроектированным, непроверенным и бессистемно собранным. Обеспечение высокого качества кода является частью инженерного совершенства, отражающего профессионализм и превосходное мастерство. Это не только хорошо, но и, как известно, позволяет высокофункциональным и высокопроизводительным инженерным командам поставлять программное обеспечение, которое можно изменять и расширять, чтобы постоянно приносить пользу.Доступность
Если служба недоступна, возможно, она не существует. При проектировании систем следует учитывать, как система должна оставаться доступной, чтобы оставаться актуальной для клиентов и пользователей системы. Это означает:- Введение избыточности для обработки сбоев базовой системы.
- Наличие сценариев резервного копирования и восстановления, а также руководств по эксплуатации для восстановления системы после жестких сбоев.
- Удалите как можно больше единичных точек сбоев из системы.
- Наряду с горизонтальной масштабируемостью используйте региональные реплики и настройте сети доставки контента (при необходимости), чтобы сделать ваши данные доступными.
- Отслеживайте доступность вашей системы с точки зрения ваших клиентов, чтобы лучше понять, как ваша система обслуживает клиентов.
Безопасность
При проектировании систем безопасность должна рассматриваться как ключевой аспект, особенно в эпоху систем, подключенных к Интернету, когда угрозы безопасности и уязвимости могут нанести реальный вред нашим клиентам и пользователям систем. Цель создания безопасного программного обеспечения состоит не в том, чтобы достичь совершенства, а в том, чтобы понять риски, связанные с нарушениями и атаками. Наличие надлежащей модели угроз безопасности и системного подхода к пониманию того, в чем заключаются риски и какие виды угроз заслуживают приоритизации и разработки мер по их устранению, является началом безопасного проектирования и инженерной практики. Сегодня безопасность является обязательной, поскольку наши программные системы становятся частью критически важных услуг для большего числа слоев современного общества. Серьезное отношение к безопасности в системах, которые мы разрабатываем с самого начала, приближает нас к тому, чтобы лучше полагаться на программное обеспечение, которое мы создаем и развертываем для удовлетворения потребностей наших пользователей. Завоевать доверие наших клиентов достаточно сложно, и достаточно одного нарушения, чтобы потерять значительную его часть.Современные шаблоны проектирования систем
Учитывая вышеизложенные аспекты, появились некоторые закономерности для современных распределенных систем, которые по-разному решают ряд этих аспектов. Давайте рассмотрим некоторые из наиболее популярных шаблонов проектирования, которые мы видим сегодня в отношении пяти аспектов проектирования системы.Микросервисы
С появлением распределенных систем, которые сосредоточены на повышении надежности и масштабирования за счет резервирования, эффективности и производительности за счет горизонтального масштабирования, а также отказоустойчивости за счет разделения частей системы как независимо работающих сервисов, термин «микросервисы» приобрел популярность благодаря достижению следующего:- Привязка разработки, развертывания, эксплуатации и обслуживания независимых сервисов к командам, владеющим этими службами в рамках более крупной бизнес-операции. Мы можем сделать это, обслуживая внешних клиентов напрямую или косвенно через внутренних клиентов через API.
- Позволяет микросервису независимо масштабироваться в соответствии с потребностями.
- Предоставление услуг на основе четко определенного контракта позволяет реализации развиваться, чтобы оставаться автономной услугой или системой услуг.
- Масштабируемость: микросервисы без состояния, как правило, предназначены для горизонтального масштабирования, а также могут извлечь выгоду из вертикального масштабирования. В случае микросервисов, развернутых в контейнерной среде оркестровки (например, кластерах Kubernetes), микросервисы могут даже работать на одних и тех же узлах, что обеспечивает более эффективное использование существующего оборудования и масштабирование в соответствии с требованиями доступной емкости. Одним из недостатков является сложность развертывания по мере увеличения масштаба и критичности микросервисов.
- Надежность: микросервисы без состояния обычно размещаются за подсистемой балансировки нагрузки и географически распределены, чтобы избежать региональных сбоев, забирающих всю емкость системы. Одним из недостатков повышения надежности с помощью микросервисов без состояния является то, что система хранения данных, как правило, должна быть такой же или более надежной, чем реализация или развертывание микросервиса. Микросервисы с состоянием страдают от худшего из обоих подходов, где затраты на надежность обычно выражаются в виде избыточного выделения ресурсов для обработки потенциальных сбоев.
- Удобство сопровождения: микросервисы, реализующие четко определенный и стабильный контракт, обслуживаемый через API, позволяют клиентам программировать на основе этого API, а реализация развивается независимо. Однако координация изменений в API включает в себя потенциально дорогостоящую миграцию клиентов и координацию между командами, что приводит к периоду, когда микросервис имеет несколько активно поддерживаемых версий до тех пор, пока последние клиенты не перейдут из старой реализации. Ситуация только ухудшается по мере того, как все больше клиентов начинают взаимодействовать с микросервисом.
- Доступность: микросервисы обычно полагаются на среду развертывания и внешнюю инфраструктуру для удовлетворения требований клиентов к доступности. Недостатком этого является зависимость от конкретной инфраструктуры, на которой развертывается микросервис, для предоставления решения высокой доступности. Такие системы, как сервисные сетки и программные балансировщики нагрузки, становятся критически важными частями инфраструктуры, которые больше не контролируются реализацией. Это может быть хорошо, но также может быть постоянным источником обслуживания, поскольку эти системы также имеют циклы обновления и эксплуатационные расходы.
- Безопасность: аутентификация, авторизация, управление идентификацией и управление учетными данными могут быть делегированы промежуточному ПО или с помощью внешних механизмов (например, удостоверений рабочей нагрузки в Kubernetes), где реализация микросервисов может быть сосредоточена на интеграции соответствующей бизнес-логики. Недостатком, как и доступность, является то, что эти внешние части решения становятся критически важными частями инфраструктуры, которые приносят свои собственные эксплуатационные расходы поверх реализации микросервиса.
Бессерверные технологии
Как и в решениях на основе микросервисов, использование бессерверных реализаций дополнительно делегирует ключевые элементы функциональности обслуживания запросов базовой инфраструктуре. Если в микросервисах служба обслуживается постоянным процессом, бессерверные решения обычно реализуют только точку входа для обработки запроса к конечной точке (обычно URI через HTTP или gRPC). В бессерверных развертываниях фактические серверы не настраиваются, а среда развертывания запускает ресурсы по мере необходимости для обработки запросов по мере их поступления. Иногда эти ресурсы остаются в силе в течение некоторого времени, чтобы амортизировать затраты на их создание, но это должно быть деталью реализации. Давайте рассмотрим аспекты проектирования системы, чтобы увидеть, как складываются бессерверные решения:- Масштабируемость: Бессерверные решения так же горизонтально масштабируемы, как и микросервисы, если не больше, потому что они спроектированы так, чтобы иметь правильный размер по требованию. Недостатком этого подхода является необходимость большего контроля и полного делегирования функций масштабирования базовой бессерверной инфраструктуре.
- Надежность: Надежность бессерверных технологий зависит от емкости горизонтального масштабирования и маршрутизации сетевого трафика. Это имеет те же недостатки, что и решение Microservices.
- Удобство сопровождения: Бессерверные реализации более удобны в обслуживании, чем микросервисы, из-за акцента на бизнес-логике обработки запросов с минимальным шаблоном. Это имеет те же проблемы с эволюцией API, что и микросервисы.
- Доступность: бессерверные системы доступны так же, как и среда, в которой они развернуты. Это имеет те же проблемы, когда базовая инфраструктура становится более важной, чем само решение.
- Безопасность: Бессерверные реализации полностью зависят от конфигурации безопасности базовой инфраструктуры. Это имеет те же проблемы, когда базовая инфраструктура становится более важной, чем само решение.
Событийно-ориентированные системы (Event-Driven)
Тем не менее, есть некоторые проблемные области, где обработка онлайн-транзакций не требуется, а микросервисы и бессерверные реализации не совсем соответствуют всем требованиям. Рассмотрим случаи, когда обработка транзакций может выполняться в фоновом режиме или при наличии ресурсов. Другой случай касается фоновой обработки, когда результаты не обязательно являются интерактивными. Системы, управляемые событиями, следуют схеме наличия источника событий и приемников событий, откуда происходят и отправляются события (сообщения) соответственно. Обработка происходит от подписчиков и издателей к этим источникам и приемникам соответственно. Примером событийно-управляемой системы является чат-бот, который может участвовать во многих беседах (источники событий и приемники) и обрабатывать сообщения по мере их поступления. Распределенные системы, управляемые событиями, могут иметь несколько параллельных обработчиков сообщений, ожидающих в одних и тех же источниках, что может привести к публикации слишком большого количества приемников, которые выступают в качестве источников для других обработчиков сообщений. Этот шаблон объединения процессоров через приемники и источники называется конвейером событий. Как правило, существует единая реализация приемников и источников, которая предоставляет интерфейс очереди сообщений и масштабируется в соответствии со спросом на сообщения, поступающие через систему. Многие системы управления распределенными очередями также могут эффективно использовать диагональное масштабирование, например Apache Kafka, RabbitMQ и т. д. Давайте рассмотрим распределенные системы, управляемые событиями, с точки зрения наших пяти аспектов:- Масштабируемость: как реализация брокера сообщений/событий, так и обработчики сообщений могут масштабироваться независимо друг от друга. Некоторые недостатки возникают, когда обрабатывается слишком много сообщений/событий, и спрос на брокера событий растет далеко за пределы пропускной способности, доступной в системе.
- Надежность: Хорошие реализации брокера сообщений обеспечивают высокий уровень надежности, и рекомендуется не создавать собственную реализацию брокера сообщений. Недостатком является зависимость от решения, которое отвечает требованиям надежности решения (например, обработка финансовых транзакций сильно отличается от обработки маршрутизации обмена мгновенными сообщениями в чатах).
- Удобство сопровождения: Если вы используете гибкий формат обмена сообщениями, такой как буферы протоколов, вполне вероятно развивать авторов и читателей сообщений, используя один и тот же язык описания данных. Это по-прежнему требует координации, но не такой обременительной, как развивающиеся контракты API в системах обработки транзакций в реальном времени (как в микросервисах и бессерверных реализациях).
- Доступность: cистемы, управляемые событиями, обычно легче сделать доступными, тем более что они, как правило, не являются интерактивными приложениями. Стоимость доступности может быть связана с устаревшими сообщениями и неограниченными задержками обработки очередей.
- Безопасность: системы, управляемые событиями, должны управлять доступностью данных независимо от учетных данных. Обеспечение того, чтобы только определенные службы или обработчики сообщений могли получить доступ к определенным очередям сообщений или журналам, становится постоянной работой, поскольку через систему проходят более разнообразные данные.
Итоги
Современная разработка программного обеспечения влечет за собой проектирование масштабируемых, надежных, обслуживаемых, доступных и безопасных систем. Проектирование распределенных систем требует значительной строгости, поскольку реалии сложности современных систем растут вместе с потребностями общества в более качественных программных услугах. Мы рассмотрели три современных шаблона проектирования для распределенных систем и проработали пять аспектов хорошо спроектированных систем. Как инженеры-программисты, мы несем ответственность за разработку систем, которые решают ключевые проблемы распределенных систем в современную эпоху.5 лучших практик для React разработчиков
год назад·6 мин. на чтение
В этой статье мы рассмотрим пять наиболее распространенных лучших практик для React разработчиков. React был разработан для того, чтобы его можно было настроить именно так, как вам нужно - он не имеет жестких ограничений. Поэтому, если эти пять сценариев лучших практик вам не подходят, вы можете найти свой собственный подход.
Существует множество способов структурировать код так, чтобы он был читабельным, и у каждого свой подход к этому. Возникает вопрос, есть ли лучший способ сделать это?
Мы поговорим о лучших практиках:
- Организация каталога
- Компоненты и разделение ответственности
- Работа с состояниями
- Абстракция
- Соглашения об именовании
1. Организация каталогов
В документации React упоминается, что в целом существует два основных способа организации вашего приложения React: Группировка по функциям или маршрутам и Группировка по типу файлов. Главное здесь - не перемудрить. Если вы начинаете с небольшого приложения, вы можете органично организовать свой код по ходу работы так, как вам удобно. Помните, что React не имеет собственной жесткой структуры, поэтому на 100% зависит от вас, как все будет структурировано. Если у вас есть логическое объяснение тому, как организованы файлы, то все хорошо. Однако, поскольку в документации React упоминаются эти две стратегии организации, давайте рассмотрим каждую из них, чтобы понять, как они структурированы. Допустим, у нас есть приложение для электронной коммерции, в котором есть пользователь, список товаров, подробная страница товара, корзина и процесс оформления заказа.Группировка по функциям
Корневой каталог здесь - это каталогsrc
, который является одним из двух базовых каталогов в вашем приложении React (второй - папка public
). В каталоге src
у нас будут основные файлы App.js
и index.js
в корне папки. Затем у нас будут вложенные каталоги для каждой из функций вашего приложения.
Ваш подход к структуре может варьироваться в зависимости от того, как все организовано: в проекте может быть больше каталогов, меньше каталогов или даже более глубокая вложенность на компоненты, стилизацию и тестирование.
src/ App.js App.css App.test.js index.js global/ <= общие для всего приложения сущности AppContext.js ThemeContext.js UserContext.js Button.js cards/ index.js Cards.css Cards.js Card.css Card.js Card.test.js detailed-product/ DetailedProduct.css DetailedProduct.js DetailedProduct.test.js checkout/ ReviewOrder.css ReviewOrder.js ReviewOrder.test.js ShoppingCart.css ShoppingCart.js ShoppingCart.test.js user/ index.js User.css User.js User.test.js
Группировка по типу файлов
Корневой каталог по-прежнему является каталогомsrc
. Все, что будет отображаться на экране клиента, по-прежнему находится в этой папке. Как и раньше, мы будем хранить файлы App.js
и index.js
в корне этого каталога, а затем каталоги, представляющие составные части приложения: компоненты, контекст, CSS, хуки и тесты.
Как и прежде, способ настройки проекта зависит от вашего приложения и от того, как вы хотите его реализовать. Основная структура здесь зависит от типа файла и не более того. В конечном итоге структура вашего файла должна быть сделана так, чтобы в ней было легко ориентироваться. Как вы это сделаете, зависит только от вас. О других вариантах структурирования React приложения читайте в:src/ App.js index.js components/ App.css Card.js Cards.js ConfirmationPage.js DetailedProduct.js Footer.js Navbar.js ReviewOrder.js Settings.js ShoppingCart.js User.js context/ AppContext.js ThemeContext.js UserContext.js css/ Card.css Cards.css ConfirmationPage.css DetailedProduct.css Footer.css Navbar.css ReviewOrder.css Settings.css ShoppingCart.css User.css hooks/ useAuth.js useAxios.js tests/ App.test.js Card.test.js Cards.test.js ConfirmationPage.test.js DetailedProduct.test.js Footer.test.js Navbar.test.js ReviewOrder.test.js Settings.test.js ShoppingCart.test.js User.test.js
2. Компоненты и разделение ответственности
До появления React Hooks было довольно легко определить, что считается компонентом класса с состоянием, а что - презентационным функциональным компонентом. Некоторые разработчики также называли их "умными" компонентами и "глупыми" компонентами. Разумеется, умные компоненты - это те, которые несут состояние и обрабатывают логику, а глупые компоненты - это те, которые просто принимают передаваемые им пропсы. После появления React Hooks и обновления Context API почти все можно считать функциональным компонентом, что приводит к разговору о том, когда следует разделять компоненты, содержащие локальное состояние, и компоненты, которые его не содержат, и как это делать. В конечном счете, это зависит от вас и/или вашей команды, как построить ваш паттерн проектирования, но лучшая практика показывает, что логика и компоненты с локальным состоянием должны быть отделены от статических компонентов. Подробнее о разделении ответственности читайте в статье Разделение ответственности в React. Как использовать контейнерные и презентационные компоненты..3. Работа с состоянием и пропсами
Поток данных в React-приложении очень важен. Есть два способа работы с данными: использование состояния или передача состояния в виде пропсов. Давайте рассмотрим лучшие практики.Состояние
При работе с состоянием, будь то глобально в контекстном API или локально, его нельзя изменять напрямую, переназначая свойство state с новым значением:Вместо этого при работе с состоянием в классовых компонентах используйте методaddOne = () => { // Так обновлять состояние нельзя this.state.counter += 1; }
this.setState()
для обновления состояния.
При использовании React Hooks вы будете использовать любое название своегоimport React from "react"; import "./styles.css"; class Counter extends React.Component{ constructor(props) { super(props); this.state = { counter: 0 } } addOne = () => { this.setState({counter: this.state.counter + 1}) } subtractOne = () => { this.setState({counter: this.state.counter - 1}); } reset = () => { this.setState({ counter: 0 }); } render() { return ( <div className="App"> <h1>Simple React Counter</h1> <h2>{this.state.counter}</h2> <button onClick={this.addOne}> + </button> <button onClick={this.reset}> Reset </button> <button onClick={this.subtractOne}> - </button> </div> ); } } export default Counter;
set
метода:
import React, { useState } from "react"; import "./styles.css"; export default function App() { const [ counter, setCounter ] = useState(0); const addOne = () => { setCounter(counter + 1) } const subtractOne = () => { setCounter(counter - 1); } const reset = () => { setCounter(0); } return ( <div className="App"> <h1>Simple React Counter</h1> <h2>{counter}</h2> <button onClick={subtractOne}> - </button> <button onClick={reset}> Reset </button> <button onClick={addOne}> + </button> </div> ); }
Пропсы
При работе с пропсами и передаче состояния другим компонентам для использования, может наступить момент, когда вам потребуется передать пропсы пяти дочерним компонентам. Такой метод передачи пропсов от родителя к ребенку на протяжении нескольких поколений называется prop drilling, и его следует избегать. Хотя код, безусловно, будет работать, если вы будете передавать проп на много уровней вниз, он подвержен ошибкам, и поток данных может быть трудно отслеживать. Вам следует создать какой-либо паттерн проектирования для глобального управления состоянием с помощью Redux или Context API (Context API в настоящее время является более простым и предпочтительным способом). Подробнее о вариантах передачи данных между реакт компонентами читайте в статье Как передавать данные между компонентами в ReactJS4. Абстракция
React процветает благодаря возможности повторного использования. Когда мы говорим о лучших практиках React, часто встречается термин абстракция. Абстракция означает, что есть части большого компонента или приложения, которые могут быть изъяты, превращены в собственный функциональный компонент, а затем импортированы в более крупный компонент. Если сделать компонент как можно проще, часто так, чтобы он служил только одной цели, это увеличивает шансы на многократное использование кода. В простом приложении счетчика, созданном выше, есть возможность абстрагировать некоторые элементы от компонентаApp
. Кнопки могут быть абстрагированы в собственный компонент, где мы передаем метод и метку кнопки в качестве пропсов.
Заголовок и название приложения также могут быть размещены в собственных компонентах. После того как мы абстрагировали все элементы, компонент App
может выглядеть примерно так:
Основная цель абстракции - сделать дочерние компоненты как можно более общими, чтобы их можно было использовать повторно в любом нужном вам виде. App-компонент должен содержать только ту информацию, которая специфична для приложения, и выводить или возвращать только более мелкие компоненты.import React, { useState } from "react"; import { Button } from "./Button"; import { Display } from "./Display"; import { Header } from "./Header"; import "./styles.css"; export default function App() { const addOne = () => { setCounter(counter + 1) } const subtractOne = () => { setCounter(counter - 1); } const reset = () => { setCounter(0); } const initialState = [ {operation: subtractOne, buttonLabel:"-"}, {operation: reset, buttonLabel: "reset"}, {operation: addOne, buttonLabel: "+"} ] const [ counter, setCounter ] = useState(0); const [ buttonContents, ] = useState(initialState) return ( <div className="App"> <Header header="Simple React Counter"/> <Display counter={counter}/> {buttonContents.map(button => { return ( <Button key={button.operation + button.buttonLabel} operation={button.operation} buttonLabel={button.buttonLabel} /> ) })} </div> ); }
5. Соглашения об именовании
В React есть три основных соглашения об именовании, которые следует рассматривать как лучшие практики.- Компоненты должны быть написаны в PascalCase - а также и названы по их основной функциональности, а не по специфике приложения (на случай, если вы измените ее позже).
- Элементы, которым нужны ключи, должны быть уникальными, неслучайными идентификаторами (например, отдельные карты или записи в карточной колоде или списке). Лучшая практика - не использовать для ключей только индексы. Допустимо назначение ключа, состоящего из конкатенации двух различных свойств объекта.
key={button.operation + button.buttonLabel}
- Методы должны быть в camelCase и называться по их назначению, а не быть специфичными для приложения. По тем же причинам, что и компоненты в PascalCase, методы должны быть названы по их назначению, а не по их особенности в приложении.