Компоненты - это основные строительные блоки, используемые в современных интерфейсных фреймворках, таких как React, Vue и Svelte. Хорошо написанные компоненты могут улучшить общую структуру вашего приложения и сделать его чистым и поддерживаемым.

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

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

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

Компоненты пользовательского интерфейса общего назначения

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

Итак, эти компоненты:

  • Можно легко поделиться от проекта к проекту
  • Не зависят от состояния приложения
  • Нет доступа к глобальным данным
  • Не отправляйте запросы AJAX
  • Просто возьмите реквизит и отправьте события
  • Подходит для пакетов npm

Таким образом, UI-библиотеки, такие как Vuetify и Material-UI, считаются компонентами UI общего назначения.

Компоненты для конкретных приложений

Это компоненты, которые вы реализуете специально для своего приложения, и нет смысла использовать их где-то еще.

Эти компоненты:

  • Может использоваться только внутри вашего приложения
  • Зависит от состояния вашего приложения
  • Может иметь доступ к глобальным данным и использовать библиотеки управления состоянием, такие как Vuex и Redux.
  • Может делать запросы AJAX напрямую
  • Может использовать определенную терминологию в зависимости от домена приложения - так что называйте переменные / функции как хотите.
  • Можно повторно использовать в приложении, но не обязательно
  • Может принимать реквизиты и передавать события

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

Таким образом, ключ к написанию лучших компонентов - не путать два типа компонентов. Например, вам не нужно создавать один компонент под названием Form и повторно использовать его для всех форм в вашем приложении. Вместо этого создайте столько компонентов формы (с определенными полями), сколько вам нужно.

Надеюсь, вам понравилась эта статья. Чтобы узнать больше о подобных вещах, подпишитесь на меня в твиттере @tahazsh и подпишитесь на RSS-канал моего блога.