Вы обнаруживаете, что пишете много проверок условий, что такое область просмотра, а затем визуализируете пользовательский интерфейс, специфичный для области просмотра, для компонента в ваших приложениях. Если вы чувствуете боль от поддержания такого количества условий в своем коде, вы попали в нужное место.
Прочтите ниже, чтобы узнать, как мы можем переместить все эти уродливые проверки условий по всему вашему коду рендеринга в одно место. С этим шаблоном ваш код становится более читаемым и поддерживаемым, при этом сохраняется вся гибкость наличия различных реализаций для каждого окна просмотра.
В этой статье предполагается, что вы понимаете основы React. Как написать компонент React.
Декораторы
Согласно Википедии, шаблон декоратора - это шаблон дизайна, который позволяет добавлять поведение к отдельному объекту. Что ж, в нашем случае объект выглядит как класс ES6, который будет украшен дополнительной ответственностью за понимание того, как визуализировать мобильную реализацию.
Давайте рассмотрим, как декораторы могут нам в этом помочь.
Использование декоратора @mobileRenderable
Предположим, у вас есть компонент MyComponent. MyComponent имеет две разные уникальные реализации, которые отображаются на основе окна просмотра, в котором вы находитесь.
Ваш обычный MyComponent будет выглядеть следующим образом
Теперь, если вам нужен тот же компонент с похожими данными, но для другого отображения на мобильных устройствах. Для этого вы можете использовать декоратор mobileRendrable, как показано ниже.
Обратил внимание на @mobileRenderable в верхней части определения класса. mobileRenderable сообщает классу, что этот класс имеет другую реализацию для мобильных устройств. В мобильном окне просмотра следует использовать renderMobile вместо рендеринга. Разве это не чисто? Но подождите, как вы решите, что мобильное, а что нет. Хорошо, чтобы понять, что нам нужно погрузиться в реализацию декоратора @mobileRenderable.
Реализация @mobileRenderable
Если вы новичок в декораторах в JavaScript, я предлагаю прочитать Изучение декораторов ES7 Адди Османи. Вы можете продолжить эту статью и, возможно, вернуться к основам декоратора, если она начнет сбивать с толку.
Простая минимальная реализация, изображающая концепцию, будет следующей.
Одной строкой реализацию можно пояснить как. Замените метод рендеринга компонента React, который рендерится с методом renderMobile, если мы используем мобильный форм-фактор.
Реализация deviceIdentification () оставлена на усмотрение разработчика декоратора. Функция deviceIdentification идентифицирует устройство и предоставляет эти данные декоратору для принятия необходимого решения.
Это требует некоторой обработки определений функций. Полная реализация будет выглядеть следующим образом.
Вышеупомянутая реализация выполняет еще две вещи, включая базовую реализацию.
- Выдает предупреждение, если функция mobileRender не предусмотрена.
- Исходный метод рендеринга сохраняется для справки под именем свойства __render на тот случай, если он необходим внутри метода renderMobile.
Вывод
Благодаря этому шаблону код в вашем приложении будет более удобным в обслуживании, поскольку решение принимается намного раньше в жизненном цикле приложения во время компиляции класса. Вы можете создать несколько версий mobileRenderable, например tabletRenderable, в соответствии с вашими потребностями. Решение о том, что является мобильным, остается на усмотрение пользователя. Это может быть окно просмотра или анализ пользовательского агента.
Надеюсь, эта статья оказалась для вас полезной. Если у вас есть какие-либо комментарии / предложения, не стесняйтесь комментировать.
