Термин “Чистый код” означает не просто код, который работает. Он также означает собой грамотно организованный код, который легко читать, просто понимать и элементарно поддерживать.

Давайте посмотрим на некоторые из лучших практик по чистому коду в React, которые могут отправить удобство по поддержанию Вашего кода в космос!????????

1. Предусмотрите явно заданные типы для всех значений

Достаточно часто при использовании TypeScript многие “забивают” на указание явных типов для значений, таким образом упуская истинную ценность, которую может привнести TypeScript. Часто в кодовой базе можно увидеть вот такое:

Плохой пример 01:

Плохой пример 02:

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

Хороший пример:

2. Учитывайте предыдущее состояние при обновлении состояния

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

Плохой пример:

Хороший пример:

3. Сохраняйте Ваши файлы компактными и ясными

Если сохранять ваши файлы атомарными и компактными, то это позволит отлаживать, поддерживать и даже находить файлы намного проще!

Плохой пример:

Хороший пример:

4. Используйте Перечисления или Константные Объекты для значений с множественными состояниями

Процесс управления переменными, которые принимают множественные состояния, можно облегчить использованием Перечислений Enums или Константных Объектов Constant Objects.

Плохой пример:

Хороший пример:

5. Как можно больше используйте TSX без TypeScript

Вы спросите, как TSX может использоваться без TypeScript? ????

Все очень просто - здесь мы говорим только о Разметке (Markdown), а НЕ о всем компоненте. Избегая применения функций в разметке, Вы сохраняете ваш компонент более легким для понимания.

Плохой пример:

Хороший пример:

ПРИМЕЧАНИЕ: Если логика укладывается в одну строку, использование ее в TSX является допустимой.

6. Применяйте ясные условные выражения для рендеринга элементов

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

Плохой пример:

Хороший пример:

7. Используйте сокращения JSX

Булевы пропсы

Пропсы со значением “true” могут быть переданы в компонент при помощи указания только имени пропса и без указания его значения, например так: truthyProp. Написание его в виде truthyProp={true} является необязательным.

Плохой пример:

Хороший пример:

Строковые пропсы

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

Плохой пример:

Хороший пример:

Пропсы в значении Undefined

Также как в обычном Typescript/Javascript, если в проп не передается значение, то оно будет равно undefined.

Плохой пример:

Хороший пример:

Теперь Вы тоже знаете, как писать чистый TSX!