Практические советы по повышению качества кода
React очень не думает о том, как все должно быть структурировано. Именно поэтому мы обязаны поддерживать чистоту наших проектов и поддерживать их в исправном состоянии.
Сегодня мы поговорим о некоторых передовых методах, которым нужно следовать, чтобы улучшить состояние вашего приложения React. Эти правила широко распространены. Таким образом, обладать этими знаниями необходимо.
Все будет показано с кодом, так что пристегнитесь!
1. Используйте JSX ShortHand.
Попробуйте использовать сокращение JSX для передачи логических переменных. Допустим, вы хотите управлять видимостью заголовка Navbar компонента.
Плохой
Хороший
2. Используйте тернарные операторы
Допустим, вы хотите отобразить сведения о конкретном пользователе в зависимости от его роли.
Плохой
Хороший
3. Воспользуйтесь преимуществами объектных литералов
Объектные литералы могут помочь сделать наш код более читабельным. Допустим, вы хотите показать три типа пользователей в зависимости от их роли. Вы не можете использовать троичный, потому что количество вариантов больше двух.
Плохой
Хороший
Теперь это выглядит намного лучше.
4. Используйте фрагменты
Всегда используйте Fragment вместо Div. Это сохраняет код чистым, а также способствует повышению производительности, поскольку в виртуальной модели DOM создается на один узел меньше.
Плохой
Хороший
5. Не определяйте функцию внутри рендера
Не определяйте функцию внутри рендера. Постарайтесь свести логику внутри рендера к абсолютному минимуму.
Плохой
Хороший
6. Используйте Memo
React.PureComponent и Memo могут значительно повысить производительность вашего приложения. Они помогают нам избежать ненужного рендеринга.
Плохой
Хотя дочерний компонент должен отображаться только один раз, потому что значение count не имеет ничего общего с ChildComponent. Но он отображается каждый раз, когда вы нажимаете кнопку.
Хороший
Давайте отредактируем ChildrenComponent на это:
Теперь независимо от того, сколько раз вы нажимаете кнопку, она будет отображаться только при необходимости.
7. Поместите CSS в JavaScript.
Старайтесь избегать необработанного JavaScript при написании приложений React, потому что организовать CSS намного сложнее, чем организовать JS.
Плохой
Хороший
8. Используйте деструктуризацию объектов.
Используйте деструктуризацию объекта в своих интересах. Допустим, вам нужно показать данные пользователя.
Плохой
Хороший
9. Струнным реквизитам не нужны фигурные скобки.
При передаче строковых свойств дочернему компоненту.
Плохой
Хороший
10. Удалите код JS из JSX.
Удалите любой код JS из JSX, если он не служит какой-либо цели отрисовки или функциональности пользовательского интерфейса.
Плохой
Хороший
11. Используйте шаблонные литералы
Используйте шаблонные литералы для построения больших строк. Избегайте использования конкатенации строк. Красиво и чисто.
Плохой
Хорошо
12. Импорт по порядку
Всегда старайтесь импортировать вещи в определенном порядке. Это улучшает читаемость кода.
Плохой
Хороший
Практическое правило - сохранять такой порядок импорта:
- Встроенный
- Внешний
- Внутренний
Таким образом, приведенный выше пример выглядит следующим образом:
13. Используйте неявный возврат
Используйте функцию неявного return JavaScript для написания красивого кода. Допустим, ваша функция выполняет простой расчет и возвращает результат.
Плохой
Хороший
14. Именование компонентов
Всегда используйте PascalCase для компонентов и camelCase для экземпляров.
Плохой
Хороший
15. Зарезервированное наименование реквизита
Не используйте имена свойств компонентов DOM для передачи свойств между компонентами, потому что другие могут не ожидать этих имен.
Плохой
Хороший
16. Цитаты
Используйте двойные кавычки для атрибутов JSX и одинарные кавычки для всех остальных JS.
Плохой
Хороший
17. Именование реквизита
Всегда используйте camelCase для имен свойств или PascalCase, если значение prop является компонентом React.
Плохой
Хороший
18. JSX в скобках
Если ваш компонент занимает более одной строки, всегда заключайте его в круглые скобки.
Плохой
Хороший
19. Самозакрывающиеся теги
Если у вашего компонента нет дочерних элементов, используйте самозакрывающиеся теги. Это улучшает читаемость.
Плохой
Хороший
20. Подчеркивание в имени метода
Не используйте символы подчеркивания ни в одном внутреннем методе React.
Плохой
Хороший
21. Альтернативная опора
Всегда включайте опору alt в свои <img > теги. И не используйте picture или image в свойстве alt, потому что программы чтения с экрана уже объявляют img элементы как изображения. Нет необходимости включать это.
Плохой
Хороший
Заключение
Вот и все. Поздравляем, если вы зашли так далеко! Надеюсь, вы кое-что узнали из этой статьи.
Я надеюсь у тебя был замечательный день! : D
Есть что сказать? Свяжитесь со мной через LinkedIn
Ресурсы
- Правила Airbnb: https://github.com/airbnb/javascript/tree/master/react
