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

Другие авторы Среды программирования могут посоветовать вам кодировать это, а не это. Это не мой путь. Я дам вам инструменты, но, в конечном счете, вы сами рисуете картину.

Вот мои 10 React AntiPatterns, которых вам следует избегать/использовать при написании кода на ReactJS. Это советы о полезных вариантах использования React, а также о реализациях, которых следует избегать. Без дальнейших промедлений, давайте прыгнем.

№1. Начните с одного большого компонента

Мой первый совет начинается с того, чтобы убедиться, что мы не чрезмерно оптимизируем наш код React. Это означает, что мы не делаем компоненты налево и направо. Мы делаем только то, что необходимо. Для этого я рекомендую вам начать с создания приложения React сразу в вашем основном компоненте App.js следующим образом:

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

Чтобы извлечь фрагмент кода в отдельный компонент, используйте расширение VS Code под названием Glean:

№2 — Вложенные компоненты

Я сам совершал эту ошибку так много раз, потому что это кажется таким интуитивным. Типичная ситуация заключается в том, что вы вкладываете дочерний компонент в родительский компонент. Взглянем:

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

Решение заключается в том, чтобы просто включить ваш дочерний компонент вне родительского компонента и отобразить его внутри родительского компонента с использованием таких реквизитов:

#3 — Храните каждый компонент в каталоге своей категории

В целях организации и простоты использования я бы рекомендовал хранить каждый компонент в своем собственном каталоге, который классифицируется самим компонентом. Например, у вас будет каталог Navbar, в котором хранится файл Navbar.js, любые изображения, связанные с Navbar, CSS, машинописный текст и т. д. Это будет выглядеть примерно так:

Вот как я организую свои файлы:

№4. Избегайте бессмысленных разделов

Часто, чтобы родительские элементы существовали в функции, вы должны хранить их в Div. С React у вас есть возможность использовать ‹React.Fragment›, чтобы полностью заменить Div.

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

Вот тут-то и появляются фрагменты. Фрагменты позволяют вам создать родительский элемент, фактически не создавая дополнительный избыточный узел в DOM.

Вот и все!