Прошло много времени с тех пор, как я работал в различных реактивных проектах. Из каждого моего проекта и работы с разными членами команды я узнал много разных практик, которые, если следовать им в проекте, могут сделать код более удобным для сопровождения. Позвольте мне поделиться с вами некоторыми из этих практик:
1. Всегда добавляйте noreferrer в тег привязки, у которого есть target=»_blank» и href принадлежит другому хосту. Хотя современные браузеры добавляют его явно, его лучше оставить для устаревших браузеров. Для чего проверьте эту ссылку.
2. Для пакетов React с разрывом строки между этими категориями следует соблюдать следующий порядок импорта:
а. Сторонние библиотеки, такие как react, react-redux и т. д.
б. Утилиты, константы
в. Компоненты сторонних производителей
д. Наши компоненты/контейнеры
е. Изображений
ф. Определение типа
г. CSS
3. Избегайте вложенных объявлений CSS или !important правил, вместо этого увеличьте специфичность.
4. Все файлы, экспортирующие компонент, должны начинаться с заглавной буквы, кроме index.js.
5. Имена папок должны следовать за регистром змейки (разделяться знаком «-», а не _), а имена файлов компонентов должны следовать за регистром Pascal. Файлы Javascript, кроме компонентов, должны следовать верблюжьему регистру.
6. Следуйте принципам дизайна DRY, KISS и YAGNI во всем коде.
7. Добавьте комментарии поверх жесткого кодирования потенциальных переменных CSS в формате жесткое кодирование (цвет) ‹название-цвета› сверху. Мы постараемся следовать этому, чтобы иметь возможность сканировать жесткое кодирование для различных сценариев, например, если мы когда-нибудь захотим разрешить пользователям переключать темы или диагностировать пробелы в системе дизайна.
8. Добавьте комментарии к задачам в формате todo (‹feature-name›).
9. Используйте сокращение JSX, например:
Вместо использования ‹NavBar showHamburger={true} /› следует использовать:
‹NavBar showГамбургер /›
10. Используйте преимущества Object Literal везде, где вы думаете о применении нескольких условий или операторов switch. Например, если вы хотите написать код как:
переключатель (значение) {
case ‘valA’: return ‹ComponentA /›;
case ‘valB’: вернуть ‹ComponentB /›;
case ‘valC’: вернуть ‹ComponentC /›;
}
Вместо этого напишите его, используя Object Literal как:
пусть об = {
valA:‹ComponentA /›,
valB:‹КомпонентB /›,
valC:‹КомпонентC /›
};
вернуть об[вал];
11. Предпочитайте фрагменты, а не Div. Это делает код более читабельным и повышает производительность, поскольку виртуальный DOM получает на один div меньше.
12. Позаботьтесь о бесполезном рендеринге в приложениях React. Вы можете правильно использовать компоненты React.Memo, Pure, useMemo, useCallback, чтобы избежать бесполезных проблем с рендерингом.
13. Если вы обращаетесь к свойству объекта несколько раз, деструктурируйте его, а затем используйте. Например, вместо этого выполните следующие действия:
возвращаться (
<>
{props.aProperty}
{props.aProperty}
{props.aProperty}
</>
);
Do it as:
const {aProperty} = реквизит;
возвращаться (
<>
{недвижимость}
{недвижимость}
{недвижимость}
</>
);
14. Не добавляйте фигурные скобки со строковыми реквизитами. Например:
Скорее делать как:
‹ComponentA title={"Привет, мир"} /›
Do it as:
‹ComponentA title="Привет, мир" /›
15. Избегайте использования оператора конкатенации строк «+», вместо этого используйте литералы шаблонов для конкатенации строк.
16. Не используйте var для инициализации переменных. Используйте const везде, где это возможно, в противном случае let.
17. Всегда добавляйте к изображениям атрибут alt.
18. Не определяйте такие функции, как обработчики событий, внутри операторов рендеринга или возврата компонентов функции.
На этом пока все :-).
