![](https://webcf.waybackmachine.org/web/20220803153246/https://habrastorage.org/getpro/habr/upload_files/450/a6f/c73/450a6fc73b2b0bf18bd42139f7e9c999.jpg)
Термин “Чистый код” означает не просто код, который работает. Он также означает собой грамотно организованный код, который легко читать, просто понимать и элементарно поддерживать.
Давайте посмотрим на некоторые из лучших практик по чистому коду в 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!
![](https://webcf.waybackmachine.org/web/20220803153246/https://habrastorage.org/getpro/habr/upload_files/745/59c/da6/74559cda6b8a1cb3cc8e5f2be0e180d2.gif)