Современная программная инженерия — Часть 1: Проектирование систем

В ранние времена (конце 80-х и начале 90-х) разработка программного обеспечения в основном заключалась в программном обеспечении, которое работало локально на вашем компьютере или на мейнфреймах со значительно большей вычислительной мощностью, если у вас был к нему доступ. Сегодня большая часть разрабатываемого программного обеспечения либо работает в облаке, либо работает на устройстве, требующем доступа к облаку, либо поддерживает другое программное обеспечение, которое также работает в облаке. Очень редко случается работать над программной системой, которая работает в ограниченном пространстве (например, встроенные программные системы), которые не имеют доступа к более мощной вычислительной платформе в другом месте. Системы бухгалтерского учета теперь обрабатывают кучи данных, размещенных на собственном железе либо в хранилище данных. В системах продаж теперь отношения с клиентами управляются третьей стороной с помощью плагинов, разработанных еще большим количеством сторонних или собственных разработчиков.

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

Важность проектирования систем

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

Компоненты проектирования системы

Когда мы говорим о проектировании системы, обычно это влечет за собой несколько компонентов:

• Архитектура — как выглядит решение в целом? Включает ли он в себя несколько подсистем? Есть ли отдельные компоненты, составляющие единое целое? Как они взаимодействуют и как они связаны друг с другом?
• Топология — есть ли в решении многоуровневая структура? Если это распределенная система, то где службы компонентов расположены физически или логически по отношению друг к другу?
• Низкоуровневое проектирование — Какие интерфейсы вы определили, через которые взаимодействуют различные части систем? Существуют ли конкретные алгоритмы, которые вы используете для решения ключевых аспектов решения (производительность, эффективность, пропускная способность, устойчивость и т. д.)?

Это помогает понять в первую очередь такие вещи, как: является ли система самодостаточной (т.е. не будет иметь доступа к внешним ресурсам) или она распределена? Будет ли у него пользовательский интерфейс или он будет неинтерактивным (например, генерирует ли он распечатанный отчет или потребует участия человека или другой системы во время его работы)? Нужно ли обрабатывать много трафика? Предназначен ли он для использования только десятью людьми в любой момент времени, или 10 миллионов пользователей будут использовать его в любой момент времени? Как только вы получите ответы на некоторые из этих вопросов, принятие решений на основе принципов проектирования системы станет проще.

Принципы проектирования системы

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

• Масштабируемость
• Надёжность
• Поддерживаемость
• Доступность
• Безопасность

Масштабируемость

Система является масштабируемой, если она может быть развернута для обработки роста нагрузки при пропорциональном росте ресурсов. Коэффициент масштабирования системы определяется как рост количества ресурсов, необходимых для обслуживания, рост нагрузки на систему. Мы сталкиваемся с двумя типичными случаями масштабирования с программными системами: вертикальное масштабирование и горизонтальное масштабирование. Вертикальное масштабирование относится к предоставлению программной системе большего запаса или ресурсов одного компьютера для обработки растущих требований. Рассмотрим случай сетевого устройства хранения данных. Чем больше места для хранения вы предоставляете с помощью устройства, тем больше данных оно может хранить. Если он необходим для обработки большего количества одновременных подключений и операций ввода-вывода (IOPS), обычно требуется добавить больше вычислительной мощности и сетевых интерфейсов, чтобы справиться с возросшей нагрузкой. Горизонтальное масштабирование относится к репликации системы или нескольких компьютеров с копиями программного обеспечения для обработки растущих требований. Рассмотрим случай сервера статического веб-содержимого, скрытого за подсистемой балансировки нагрузки. Добавление дополнительных серверов позволяет большему количеству клиентов подключаться и загружать контент с веб-серверов, а когда нагрузка спадает, количество веб-серверов может быть уменьшено до нужного размера для текущего спроса. Некоторые системы могут обрабатывать гибридное или диагональное масштабирование. Например, некоторые архитектуры распределенных баз данных позволяют разделять вычислительные узлы и узлы хранения, чтобы рабочие нагрузки с большими вычислительными ресурсами могли использовать узлы с большим количеством вычислительных ресурсов. В отличие от этого, тяжелые рабочие нагрузки операций ввода-вывода в секунду могут выполняться на узлах хранилища + вычислений. Например, приложения потоковой обработки могут разделять рабочие нагрузки, требующие больше памяти и вычислительных ресурсов (например, рабочие нагрузки поиска событий или аналитики), и масштабировать их соответствующим образом и независимо от тяжелых рабочих нагрузок операций ввода-вывода в секунду (например, сжатие и архивирование).

Надёжность

Система надежна, когда она может выдержать частичный отказ и восстановление без серьезного ухудшения качества обслуживания. Часть надежности системы включает в себя предсказуемость ее операций с точки зрения задержки, пропускной способности и соблюдения согласованного диапазона операций. Обычные подходы к обеспечению надежности системы включают следующее:

• Настройка резервирования системы для поддержки прозрачного или минимального аварийного переключения.
• Создание отказоустойчивости в случае внутренних ошибок или сбоев, вызванных вводом.
• Четкое определение контрактов и целевых показателей задержки, пропускной способности и доступности.
• Создание достаточных резервных мощностей для удовлетворения всплесков и органического роста нагрузки.
• Гарантии качества обслуживания для обеспечения соблюдения ограничений скорости и изоляции клиентов/операций.
• Реализация корректной деградации службы в сценариях перегрузки или катастрофического сбоя.

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

Поддерживаемость

Система пригодна для обслуживания, если она изменяется с соразмерными усилиями и развертывается с минимальным вмешательством пользователя. Для этого необходимо внедрить систему таким образом, чтобы предположить, что требования будут меняться, и что она достаточно гибкая, чтобы справляться с предсказуемыми изменениями. Это также означает обеспечение того, чтобы код был читабельным, чтобы следующий набор сопровождающих (которые могут быть той же командой, но смотрят на это новыми глазами в будущем) мог поддерживать программное обеспечение и развивать его для удовлетворения будущих потребностей. Никто не хочет застрять на обслуживании программного обеспечения, которое является жестким, трудно изменяемым, плохо организованным, плохо документированным, плохо спроектированным, непроверенным и бессистемно собранным. Обеспечение высокого качества кода является частью инженерного совершенства, отражающего профессионализм и превосходное мастерство. Это не только хорошо, но и, как известно, позволяет высокофункциональным и высокопроизводительным инженерным командам поставлять программное обеспечение, которое можно изменять и расширять, чтобы постоянно приносить пользу.

Доступность

Если служба недоступна, возможно, она не существует. При проектировании систем следует учитывать, как система должна оставаться доступной, чтобы оставаться актуальной для клиентов и пользователей системы. Это означает:

• Введение избыточности для обработки сбоев базовой системы.
• Наличие сценариев резервного копирования и восстановления, а также руководств по эксплуатации для восстановления системы после жестких сбоев.
• Удалите как можно больше единичных точек сбоев из системы.
• Наряду с горизонтальной масштабируемостью используйте региональные реплики и настройте сети доставки контента (при необходимости), чтобы сделать ваши данные доступными.
• Отслеживайте доступность вашей системы с точки зрения ваших клиентов, чтобы лучше понять, как ваша система обслуживает клиентов.

Безопасность

При проектировании систем безопасность должна рассматриваться как ключевой аспект, особенно в эпоху систем, подключенных к Интернету, когда угрозы безопасности и уязвимости могут нанести реальный вред нашим клиентам и пользователям систем. Цель создания безопасного программного обеспечения состоит не в том, чтобы достичь совершенства, а в том, чтобы понять риски, связанные с нарушениями и атаками. Наличие надлежащей модели угроз безопасности и системного подхода к пониманию того, в чем заключаются риски и какие виды угроз заслуживают приоритизации и разработки мер по их устранению, является началом безопасного проектирования и инженерной практики. Сегодня безопасность является обязательной, поскольку наши программные системы становятся частью критически важных услуг для большего числа слоев современного общества. Серьезное отношение к безопасности в системах, которые мы разрабатываем с самого начала, приближает нас к тому, чтобы лучше полагаться на программное обеспечение, которое мы создаем и развертываем для удовлетворения потребностей наших пользователей. Завоевать доверие наших клиентов достаточно сложно, и достаточно одного нарушения, чтобы потерять значительную его часть.

Современные шаблоны проектирования систем

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

Микросервисы

С появлением распределенных систем, которые сосредоточены на повышении надежности и масштабирования за счет резервирования, эффективности и производительности за счет горизонтального масштабирования, а также отказоустойчивости за счет разделения частей системы как независимо работающих сервисов, термин «микросервисы» приобрел популярность благодаря достижению следующего:

• Привязка разработки, развертывания, эксплуатации и обслуживания независимых сервисов к командам, владеющим этими службами в рамках более крупной бизнес-операции. Мы можем сделать это, обслуживая внешних клиентов напрямую или косвенно через внутренних клиентов через API.
• Позволяет микросервису независимо масштабироваться в соответствии с потребностями.
• Предоставление услуг на основе четко определенного контракта позволяет реализации развиваться, чтобы оставаться автономной услугой или системой услуг.

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

• Масштабируемость: микросервисы без состояния, как правило, предназначены для горизонтального масштабирования, а также могут извлечь выгоду из вертикального масштабирования. В случае микросервисов, развернутых в контейнерной среде оркестровки (например, кластерах Kubernetes), микросервисы могут даже работать на одних и тех же узлах, что обеспечивает более эффективное использование существующего оборудования и масштабирование в соответствии с требованиями доступной емкости. Одним из недостатков является сложность развертывания по мере увеличения масштаба и критичности микросервисов.
• Надежность: микросервисы без состояния обычно размещаются за подсистемой балансировки нагрузки и географически распределены, чтобы избежать региональных сбоев, забирающих всю емкость системы. Одним из недостатков повышения надежности с помощью микросервисов без состояния является то, что система хранения данных, как правило, должна быть такой же или более надежной, чем реализация или развертывание микросервиса. Микросервисы с состоянием страдают от худшего из обоих подходов, где затраты на надежность обычно выражаются в виде избыточного выделения ресурсов для обработки потенциальных сбоев.
• Удобство сопровождения: микросервисы, реализующие четко определенный и стабильный контракт, обслуживаемый через API, позволяют клиентам программировать на основе этого API, а реализация развивается независимо. Однако координация изменений в API включает в себя потенциально дорогостоящую миграцию клиентов и координацию между командами, что приводит к периоду, когда микросервис имеет несколько активно поддерживаемых версий до тех пор, пока последние клиенты не перейдут из старой реализации. Ситуация только ухудшается по мере того, как все больше клиентов начинают взаимодействовать с микросервисом.

• Доступность: микросервисы обычно полагаются на среду развертывания и внешнюю инфраструктуру для удовлетворения требований клиентов к доступности. Недостатком этого является зависимость от конкретной инфраструктуры, на которой развертывается микросервис, для предоставления решения высокой доступности. Такие системы, как сервисные сетки и программные балансировщики нагрузки, становятся критически важными частями инфраструктуры, которые больше не контролируются реализацией. Это может быть хорошо, но также может быть постоянным источником обслуживания, поскольку эти системы также имеют циклы обновления и эксплуатационные расходы.
• Безопасность: аутентификация, авторизация, управление идентификацией и управление учетными данными могут быть делегированы промежуточному ПО или с помощью внешних механизмов (например, удостоверений рабочей нагрузки в Kubernetes), где реализация микросервисов может быть сосредоточена на интеграции соответствующей бизнес-логики. Недостатком, как и доступность, является то, что эти внешние части решения становятся критически важными частями инфраструктуры, которые приносят свои собственные эксплуатационные расходы поверх реализации микросервиса.

Микросервисы — это отличный способ разбить большое приложение, где можно определить логические разделы, требующие собственных доменов масштабирования и надежности. Однако, когда вы начинаете с нуля, не лучше проектировать микросервисы с самого начала из-за риска разбить службы на слишком мелкие части. Затраты на обмен данными между микросервисами (как правило, в виде запросов HTTP или gRPC) значительны и должны быть понесены только в случае необходимости. Хороший способ определить, подходит ли функциональность для службы, — следовать таким практикам, как проектирование на основе предметной области или функциональная декомпозиция.

Бессерверные технологии

Как и в решениях на основе микросервисов, использование бессерверных реализаций дополнительно делегирует ключевые элементы функциональности обслуживания запросов базовой инфраструктуре. Если в микросервисах служба обслуживается постоянным процессом, бессерверные решения обычно реализуют только точку входа для обработки запроса к конечной точке (обычно URI через HTTP или gRPC). В бессерверных развертываниях фактические серверы не настраиваются, а среда развертывания запускает ресурсы по мере необходимости для обработки запросов по мере их поступления. Иногда эти ресурсы остаются в силе в течение некоторого времени, чтобы амортизировать затраты на их создание, но это должно быть деталью реализации. Давайте рассмотрим аспекты проектирования системы, чтобы увидеть, как складываются бессерверные решения:

• Масштабируемость: Бессерверные решения так же горизонтально масштабируемы, как и микросервисы, если не больше, потому что они спроектированы так, чтобы иметь правильный размер по требованию. Недостатком этого подхода является необходимость большего контроля и полного делегирования функций масштабирования базовой бессерверной инфраструктуре.
• Надежность: Надежность бессерверных технологий зависит от емкости горизонтального масштабирования и маршрутизации сетевого трафика. Это имеет те же недостатки, что и решение Microservices.
• Удобство сопровождения: Бессерверные реализации более удобны в обслуживании, чем микросервисы, из-за акцента на бизнес-логике обработки запросов с минимальным шаблоном. Это имеет те же проблемы с эволюцией API, что и микросервисы.
• Доступность: бессерверные системы доступны так же, как и среда, в которой они развернуты. Это имеет те же проблемы, когда базовая инфраструктура становится более важной, чем само решение.
• Безопасность: Бессерверные реализации полностью зависят от конфигурации безопасности базовой инфраструктуры. Это имеет те же проблемы, когда базовая инфраструктура становится более важной, чем само решение.

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

Событийно-ориентированные системы (Event-Driven)

Тем не менее, есть некоторые проблемные области, где обработка онлайн-транзакций не требуется, а микросервисы и бессерверные реализации не совсем соответствуют всем требованиям. Рассмотрим случаи, когда обработка транзакций может выполняться в фоновом режиме или при наличии ресурсов. Другой случай касается фоновой обработки, когда результаты не обязательно являются интерактивными. Системы, управляемые событиями, следуют схеме наличия источника событий и приемников событий, откуда происходят и отправляются события (сообщения) соответственно. Обработка происходит от подписчиков и издателей к этим источникам и приемникам соответственно. Примером событийно-управляемой системы является чат-бот, который может участвовать во многих беседах (источники событий и приемники) и обрабатывать сообщения по мере их поступления. Распределенные системы, управляемые событиями, могут иметь несколько параллельных обработчиков сообщений, ожидающих в одних и тех же источниках, что может привести к публикации слишком большого количества приемников, которые выступают в качестве источников для других обработчиков сообщений. Этот шаблон объединения процессоров через приемники и источники называется конвейером событий. Как правило, существует единая реализация приемников и источников, которая предоставляет интерфейс очереди сообщений и масштабируется в соответствии со спросом на сообщения, поступающие через систему. Многие системы управления распределенными очередями также могут эффективно использовать диагональное масштабирование, например Apache Kafka, RabbitMQ и т. д. Давайте рассмотрим распределенные системы, управляемые событиями, с точки зрения наших пяти аспектов:

• Масштабируемость: как реализация брокера сообщений/событий, так и обработчики сообщений могут масштабироваться независимо друг от друга. Некоторые недостатки возникают, когда обрабатывается слишком много сообщений/событий, и спрос на брокера событий растет далеко за пределы пропускной способности, доступной в системе.
• Надежность: Хорошие реализации брокера сообщений обеспечивают высокий уровень надежности, и рекомендуется не создавать собственную реализацию брокера сообщений. Недостатком является зависимость от решения, которое отвечает требованиям надежности решения (например, обработка финансовых транзакций сильно отличается от обработки маршрутизации обмена мгновенными сообщениями в чатах).
• Удобство сопровождения: Если вы используете гибкий формат обмена сообщениями, такой как буферы протоколов, вполне вероятно развивать авторов и читателей сообщений, используя один и тот же язык описания данных. Это по-прежнему требует координации, но не такой обременительной, как развивающиеся контракты API в системах обработки транзакций в реальном времени (как в микросервисах и бессерверных реализациях).

• Доступность: cистемы, управляемые событиями, обычно легче сделать доступными, тем более что они, как правило, не являются интерактивными приложениями. Стоимость доступности может быть связана с устаревшими сообщениями и неограниченными задержками обработки очередей.
• Безопасность: системы, управляемые событиями, должны управлять доступностью данных независимо от учетных данных. Обеспечение того, чтобы только определенные службы или обработчики сообщений могли получить доступ к определенным очередям сообщений или журналам, становится постоянной работой, поскольку через систему проходят более разнообразные данные.

Итоги

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

Существует множество способов структурировать код так, чтобы он был читабельным, и у каждого свой подход к этому. Возникает вопрос, есть ли лучший способ сделать это? Мы поговорим о лучших практиках:

• Организация каталога
• Компоненты и разделение ответственности
• Работа с состояниями
• Абстракция
• Соглашения об именовании

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, хуки и тесты.

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

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

• Архитектура современного React приложения
• Структура React приложения

2. Компоненты и разделение ответственности

До появления React Hooks было довольно легко определить, что считается компонентом класса с состоянием, а что - презентационным функциональным компонентом. Некоторые разработчики также называли их "умными" компонентами и "глупыми" компонентами. Разумеется, умные компоненты - это те, которые несут состояние и обрабатывают логику, а глупые компоненты - это те, которые просто принимают передаваемые им пропсы. После появления React Hooks и обновления Context API почти все можно считать функциональным компонентом, что приводит к разговору о том, когда следует разделять компоненты, содержащие локальное состояние, и компоненты, которые его не содержат, и как это делать. В конечном счете, это зависит от вас и/или вашей команды, как построить ваш паттерн проектирования, но лучшая практика показывает, что логика и компоненты с локальным состоянием должны быть отделены от статических компонентов. Подробнее о разделении ответственности читайте в статье Разделение ответственности в React. Как использовать контейнерные и презентационные компоненты..

3. Работа с состоянием и пропсами

Поток данных в React-приложении очень важен. Есть два способа работы с данными: использование состояния или передача состояния в виде пропсов. Давайте рассмотрим лучшие практики.

Состояние

При работе с состоянием, будь то глобально в контекстном API или локально, его нельзя изменять напрямую, переназначая свойство state с новым значением:

addOne = () => { // Так обновлять состояние нельзя
  this.state.counter += 1;
}

Вместо этого при работе с состоянием в классовых компонентах используйте метод this.setState() для обновления состояния.

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;

При использовании React Hooks вы будете использовать любое название своего 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 в настоящее время является более простым и предпочтительным способом). Подробнее о вариантах передачи данных между реакт компонентами читайте в статье Как передавать данные между компонентами в ReactJS

4. Абстракция

React процветает благодаря возможности повторного использования. Когда мы говорим о лучших практиках React, часто встречается термин абстракция. Абстракция означает, что есть части большого компонента или приложения, которые могут быть изъяты, превращены в собственный функциональный компонент, а затем импортированы в более крупный компонент. Если сделать компонент как можно проще, часто так, чтобы он служил только одной цели, это увеличивает шансы на многократное использование кода. В простом приложении счетчика, созданном выше, есть возможность абстрагировать некоторые элементы от компонента 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>
   );
}

Основная цель абстракции - сделать дочерние компоненты как можно более общими, чтобы их можно было использовать повторно в любом нужном вам виде. App-компонент должен содержать только ту информацию, которая специфична для приложения, и выводить или возвращать только более мелкие компоненты.

5. Соглашения об именовании

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

1. Компоненты должны быть написаны в PascalCase - а также и названы по их основной функциональности, а не по специфике приложения (на случай, если вы измените ее позже).
2. Элементы, которым нужны ключи, должны быть уникальными, неслучайными идентификаторами (например, отдельные карты или записи в карточной колоде или списке). Лучшая практика - не использовать для ключей только индексы. Допустимо назначение ключа, состоящего из конкатенации двух различных свойств объекта.

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

key={button.operation + button.buttonLabel}

3. Методы должны быть в camelCase и называться по их назначению, а не быть специфичными для приложения. По тем же причинам, что и компоненты в PascalCase, методы должны быть названы по их назначению, а не по их особенности в приложении.

Итоги

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