React очень лоялен к тому, что и как мы пишем и как организуем свой код. Поэтому ответственность за поддержание чистоты и качества наших проектов несем только мы.
Сегодня поговорим о том, как это сделать, – о самых полезных практиках разработки на React.
1. Используйте JSX-сокращения
Использовать логические значения никогда не было так просто. Допустим, вам нужно управлять видимостью компонента Navbar
– с помощью пропса showTitle
:
Плохо
Хорошо
2. Используйте тернарные операторы
Отличный способ для выбора между двумя компонентами по некоторому условию – например, в зависимости от роли активного пользователя.
Плохо
Хорошо
3. Используйте преимущества объектных литералов
Если у вас выбор между тремя и более компонентами, тернарный оператор не подходит. В этом случае литералы объектов могут сделать код более читаемым – используйте их вместо сложных условий.
Плохо
Хорошо
4. Используйте фрагменты
Нет никакого преимущества в использовании div
вместо Fragment
. Зачем вам нужен лишний элемент в виртуальном DOM?
Плохо
Хорошо
5. Не определяйте функцию внутри рендера
Старайтесь не смешивать логику и рендер внутри компонента.
Плохо
Хорошо
6. Используйте Memo
React.PureComponent
и Memo
могут значительно повысить производительность вашего приложения, позволяя избежать ненужного рендеринга.
Плохо
Дочерний компонент должен отображаться только один раз, так как значение count не имеет к нему никакого отношения. И тем не менее он рендерится при каждом нажатии на кнопку.
https://miro.medium.com/max/700/1*UC19Qvfj06VAy63lR8mOFg.png
Хорошо
Отредактируем немного ChildrenComponent
:
Теперь не имеет значения, сколько раз пользователь кликнет на кнопку, компонент отрендерится только при необходимости.
7. Перенесите CSS в JavaScript
Организовать CSS сложнее, чем JavaScript, но можно постараться.
Плохо
Хорошо
8. Используйте деструктуризацию объектов
Одна из новейших возможностей JS сделает ваш код более читаемым.
Плохо
Хорошо
9. Строковые пропсы без фигурных скобок
Передать строковые данные проще, чем вы думаете.
Плохо
Хорошо
10. Удалите JS из JSX
Уберите весь код JavaScript из JSX-разметки, если он не служит какой-либо цели рендеринга или функциональности UI.
Плохо
Хорошо
11. Строковые литералы
Используйте строковые литералы вместо громоздкой конкатенации строк.
Плохо
Хорошо
12. Порядок импортов
Старайтесь импортировать модули в определенном порядке, чтобы сделать код более логичным.
Плохо
Хорошо
Эмпирическое правило заключается в следующем порядке импорта:
- сначала встроенные (build-in) модули;
- затем внешние;
- и наконец внутренние.
13. Используйте неявный return
Неявный возврат делает ваши функции изящнее. Но не злоупотребляйте этой фичей, она уместна только в простых функциях.
Плохо
Хорошо
14. Именование компонентов
Всегда используйте PascalCase для имен компонентов и camelCase – для экземпляров.
Плохо
Хорошо
15. Зарезервированные имена свойств
Не используйте зарезервированные имена атрибутов для передачи пропсов, другие разработчики могут быть к этому не готовы.
Плохо
Хорошо
16. Кавычки
Используйте двойные кавычки для атрибутов JSX и одинарные – для всего остального кода JavaScript.
Плохо
Хорошо
17. Именование пропсов
Всегда используйте camelCase для имен пропсов или PascalCase, если значение атрибута – это другой React-компонент.
Плохо
Хорошо
18. JSX в скобках
Если ваш компонент занимает больше, чем одну строчку, всегда оборачивайте его в скобки.
Плохо
Хорошо
19. Самозакрывающиеся теги
Если у вашего компонента нет дочерних элементов, используйте самозакрывающийся тег для улучшения читаемости.
Плохо
Хорошо
20. Подчеркивание в именах методов
Не используйте подчеркивание в любых внутренних методах.
Плохо
Хорошо
21. Атрибут alt
Всегда устанавливайте атрибут alt для теги img и не используйте в нем слова image и picture. Альтернативный текст предназначен для скринридеров, которые и так объявляют элемент как изображение, зачем повторяться?
Плохо
Хорошо
Заключение
Вот и все. Поздравляем, если вы зашли так далеко! Надеюсь, вы кое-что узнали из этой статьи.
Делитесь своими правилами хорошего кода в комментариях