1. Информативные и понятные имена

В информатике есть лишь две сложные вещи: аннулирование кэша и присвоение имен (Филип Карлтон).

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

Удачное название должно быть кратким, точным и понятным. Например:

Использование item и todo в одном компоненте

Эти два понятия могут стать причиной некоторой двусмысленности: Todo и Item. На самом деле в данном контексте это одно и то же. Поэтому код можно представить так:

Унификация к todo, чтобы устранить двусмысленность

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

2. Тестируемость кода React

Настроить механизм тестирования кода часто бывает непросто. Но jest и react-testing-library устраняют такую проблему в проектах на React.

Кроме того, в React очень легко применять разработку на основе тестирования (test-driven development), поскольку процесс настройки теста очень простой.

Речь не идет о полной замене cypress и реальных тестов браузера на библиотеку react-testing-library. Но с ее помощью можно в значительной степени имитировать реально видимый пользователем интерфейс.

Тестирование с react-testing-library

Так вы будете тестировать именно поведение компонента.

3. Хуки

До выхода React 16.8 повторно использовать логику с отслеживанием состояния между компонентами было непросто.

Использование хуков для повторно используемой логики

В этой и последующих версиях React hooks должны стать выбором по умолчанию для повторно используемой логики. Под “логикой” имеется ввиду любой код, не связанный с пользовательским интерфейсом. Например, это выборка и манипулирование данными, управление состоянием (вы даже можете перенести эту логику в собственные уровни, например ACL и data mapper).

3. Композиция

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

К счастью, пользоваться композицией в React довольно просто. Используя пропс children и render, вы уже применяете композицию.

Компонент GenericCard

В качестве дочернего элемента можно использовать заголовок:

<GenericCard>
<h3>I'm a heading</h3>
</GenericCard>

Или более сложный компонент:

<GenericCard>
<section>
<h3>I'm a heading</h3>
<p>I have some additional description</p>
</section>
</GenericCard>

А GenericCard ничего не знает о переданных дочерних элементах.

5. Маленькие компоненты

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

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

6. Разделение проблем

Код в любом приложении React можно классифицировать по различным категориям: представление для передаваемых данных, service и data-provider для их извлечения и преобразования в формат, используемый представлением, и код инфраструктуры (настройка токена JWT, обеспечение сторонней интеграции и т. д.).

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

Старайтесь не начинать с создания файла tsx. Сначала подумайте, к какой категории он относится, выполните вычисления данных в собственных модулях, а затем используйте их в компоненте React.

7. Проверенные методы из других областей

На первый взгляд React представляет собой смесь HTML и JavaScript (иногда даже CSS) в одном файле. Познакомившись с синтаксисом JSX, можно заметить, что в целом код React не слишком отличается, например, от Java и Python.

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

Поэтому абсолютно точно можно заимствовать опыт из других областей. Как и в объектно-ориентированном проекте, в React также можно использовать интерфейс для разделения протокола и реализации (например, в пропсах render). Принцип единой ответственности (Single Responsibility Principle) есть во всех языках программирования, так почему бы не использовать его и для разделения компонентов React?

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

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

Читайте нас в TelegramVK и Дзен


Перевод статьи Juntao Qiu: 7 React Clean Code Tips You Should Know

Предыдущая статьяОбзор полезных инструментов для интроспекции объектов Python 
Следующая статьяИнтеграция Google Maps в приложение Jetpack Compose