Вступление
Безголовый компонент пользовательского интерфейса - это компонент, который предлагает максимальную визуальную гибкость, не предоставляя интерфейса. Это может звучать как предоставление шаблона пользовательского интерфейса без предоставления пользовательского интерфейса. Забавно, но это правда.
Я продемонстрирую этот шаблон с помощью React, но этот шаблон не является специфическим для React. Это просто шаблон, который помогает создавать повторно используемые компоненты пользовательского интерфейса.
Что это?
Безголовые компоненты - это компоненты, которые не имеют пользовательского интерфейса, но имеют функциональные возможности. Его не волнует, как ваши компоненты выглядят, как они спроектированы, стилизованы. Он просто дает вам функциональность, и то, как он будет выглядеть при установке или зависании, находится под вашим контролем. Он отделяет логику и поведение компонента от его визуального представления.
Правило разделения: отделите политику от механизма; отделить интерфейсы от движков.
- Эрик С. Реймонд
В чем проблема?
Иногда компоненты слишком привязаны к дизайну, который они представляют. Они созданы с учетом дизайна, который можно найти во время их создания, но не учитывают будущие улучшения.
В большинстве случаев спецификации и потребности компонента меняются владельцем продукта или дизайнером UX. Разработчики должны иметь представление о том, что компонент может измениться в будущем, и изменение компонента не должно занимать у них так много времени. В противном случае изменение компонента для покрытия новых добавленных будущих улучшений будет жестким и открытым для создания новых ошибок.
Безголовые компоненты покрывают все эти проблемы, не имея ничего общего с пользовательским интерфейсом и просто предоставляя функциональные возможности. Когда вы предоставите стабильную, хорошо протестированную функциональность, разработчикам будет намного проще изменить дизайн компонента.
Давайте рассмотрим пример!
Приведенный ниже код является примером компонента темы. Это просто демонстрация, а не безголовый компонент. Он просто устанавливает текущую тему приложения и отображает текущую тему.
Как вы можете видеть здесь, пользовательский интерфейс и логика здесь взаимосвязаны. Допустим, вы хотите заменить на значке тексты Сделать светлым и Сделать темным. Вам нужно передать их как опоры, и вам нужно добавить пару опор, чтобы сделать это возможным.
Во фрагменте кода мы добавили два новых свойства: lightIcon и darkIcon. Мы изменили компонент «Тема», чтобы обрабатывать эти реквизиты. Если они есть, будут показаны значки. В противном случае старое поведение по-прежнему будет работать, и будут отображаться тексты.
Допустим, этого недостаточно, и у нас появилось новое глупое требование: текущая тема не должна отображаться на некоторых страницах. Это означает, что им должен управлять родительский компонент. С новой опцией showCurrentTheme.
Да, мы это сделали!
В конце давайте резюмируем, что делает этот простой глупый компонент темы:
- Отображает текущий статус темы
- Позволяет изменить тему как светлую
- Позволяет изменить тему на темную
- Позволяет скрыть текущий статус темы
С каждым требованием наш компонент будет меняться, и давайте предположим, что к этому компоненту будет добавляться еще пара новых требований, и он будет более сложным. Разработчикам будет сложно поддерживать компоненты и следовать им. Кроме того, может случиться так, что добавление новых требований невозможно без изменения старого поведения.
Безголовый компонент спасет!
Возможности реализации безголового компонента практически безграничны. Вы можете делать со своим пользовательским интерфейсом все, что захотите, имея то, что предоставляется с безголовым компонентом темы. Давайте посмотрим, как написать этот компонент с помощью настраиваемого хука react.
Я должен упомянуть, что перед перехватами реакции безголовые компоненты обычно реализуются с помощью шаблона реквизита рендеринга или компонента более высокого порядка. Вы можете поискать эти шаблоны и понять, как реализовать безголовые компоненты с помощью этих подходов. Я продемонстрирую это с помощью настраиваемого хука реакции.
Как видите, с пользовательским интерфейсом ничего не связано. Мы реализовали безголовый компонент с настраиваемым хуком реакции и предоставили функции для установки темы, setDark, setLight,, а также предоставили текущую тему. При таком подходе разработчик может реализовать любой пользовательский интерфейс, используя эти функции. Приведем несколько примеров.
Это несколько основных примеров, которые дадут вам представление о том, как использовать безголовые компоненты и что они собой представляют. Я знаю, что это простой, фиктивный пример, но он описывает, что такое безголовые компоненты. Эта статья не о том, как реализовать тему, это просто пример понимания безголовых компонентов. В своем проекте вы найдете лучший вариант для реализации этого безголового компонентного подхода.
Есть отличные библиотеки, которые реализуют безголовые компоненты. Нравиться:
Предлагаю вам взглянуть на исходный код этих библиотек, особенно на react-table.
Если вам этого мало, есть много источников о безголовых компонентах. Взгляните на эти статьи. Я предлагаю вам прочитать эту статью, написанную Мерриком Кристенсеном.
В ÇSTech мы стараемся максимально реализовать этот подход. Это дает нам больше гибкости и возможность разделить логику и визуальность.
Вы можете комментировать и спросить все, что захотите, если у вас возникнут проблемы с пониманием этого подхода или если вы обнаружите, что в этой статье что-то не подходит.
использованная литература
Надеюсь, вам понравилось 👋
