Простые советы по написанию чистых компонентов React

Простые советы по написанию чистых компонентов React

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

Избегайте передачи свойств c помощью оператора разделения

Давайте сначала начнем с антипаттерна, которого вам следует избегать. Если нет конкретной и обоснованной причины, чтобы сделать это, вы должны избегать прохождения свойств вниз дерева компонентов, используя оператор разделения, например, так: {…props}.

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

Оберните параметры функций в объект

Если ваша функция принимает несколько параметров, рекомендуется заключить их в объект. Вот пример:

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Такой способ написания функции дает несколько заметных преимуществ:

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

Для редакторов с настроенным IntelliSense вы получите автозаполнение для аргументов функции.

Для обработчиков событий используйте функции, возвращающие функции обработчика

Если вы знакомы с функциональным программированием, этот метод напоминает каррирование, поскольку вы заранее устанавливаете некоторые параметры. Давайте рассмотрим пример:

Как видите, написав таким образом функции-обработчики, вы можете сохранить дерево компонентов более чистым.

Использйте map вместо if / else

Когда вам нужно отобразить различные элементы на основе пользовательской логики, я предлагаю использовать map вместо операторов if / else. Вот пример использования if / else:

А вот пример использования map:

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

Хуки компонентов

Считаю этот паттерн полезным, если вы не злоупотребляете им. Вы можете обнаружить, что используете некоторые компоненты во всем своем приложении. Если им для работы требуется состояние, вы можете обернуть их хуком, обеспечивающим это состояние. Хорошими примерами таких компонентов являются всплывающие окна, всплывающие уведомления или простые модальные окна. Например, вот хук компонента для простого модального окна подтверждения:

Затем вы можете использовать свой компонентный хук так:

Такое абстрагирование компонента избавляет вас от написания большого количества шаблонного кода управления состоянием.

Разделение компонентов

Следующие три совета относятся к разумному разделению компонентов. По моему опыту, сохранение небольших размеров компонентов — лучший способ сохранить управляемость проекта.

Используйте обертки

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

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Вот пример компонента, который реализует перетаскивание с помощью response-beautiful-dnd:

Теперь проверьте компонент после того, как мы переместили всю логику перетаскивания в компонент-оболочку:

А вот код оболочки:

В результате легче взглянуть на компонент и понять, что он делает на высоком уровне. Вся функциональность перетаскивания находится в оболочке, и её легче понять.

Разделение задач

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

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

Например, рассмотрим компонент:

Теперь вот его реорганизованная версия с разделением кода с помощью пользовательских хуков:

А вот и сам хук:

Отдельный файл для каждого компонента

Часто люди пишут такой код:

Хотя в написании такого кода нет ничего плохого, следовать ему не рекомендуется. У перевода ItemDisplay в отдельный файл нет недостатков, а плюсы заключаются в том, что ваши компоненты слабо связаны и их легче расширять.

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

Автор: Iskander Samatov

Источник: isamatov.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

React JS с Нуля до Профи

React JS. Полное руководство для современной веб-разработки

Подробнее

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.