Автор оригинала: FreeCodeCamp Community Member.
Остин Малерба
В 2015 году Дэн Абрамов написал статью, Председатель и контейнерные компоненты , что некоторые реагируют новые желания, неправильно инстругируют как заповеди. На самом деле, я сам наткнулся на статью, и многие другие употребляют свои учения, и я подумал, Это должно быть лучшим способом отдельных проблем среди компонентов Отказ
Но сам Дэн Абрамова позже обратился к сообществу за цепляться за рисунки проектирования, которые он изложен.
Работа с реагированием уже более года, я наткнулся на свои собственные шаблоны дизайна, и здесь я постараюсь формализовать их. Возьмите эти идеи с зерном соли, они просто мои собственные наблюдения, которые я нашел конструктивным.
Удаление дихотомии
Долгое время компоненты широко классифицированы как умные, либо глупые, контейнерные или презентационные, состоятельные или невыполненные, чистыми или нечистыми. Есть много терминологии, но все они значат о том же. Умные компоненты знают, как связать, ваше приложение и тупые компоненты просто принимают данные для представления конечным пользователю. Это полезное различие, но это действительно не то, как я нахожусь мышлением при разработке компонентов.
Проблема с контейнером против презентационного мышления состоит в том, что он слишком трудно определить обязанности компонентов с точки зрения состояния, логики и других аспектов внутренних аспектов компонента.
Дизайн компонентов лучше подойти путем откладывания деталей реализации и мышления с точки зрения Компонентные интерфейсы Отказ Особенно важно подумать о том, что за Настройки Компонент должен позволить и какой вид неявные и явные зависимости Компонент должен включать.
Представляя трихотомию
Трихотомия? Это вообще слово? Я не знаю, но вы понимаете идею. Я пришел, чтобы подумать о комментариях реагирования, как падение в одну из трех буннов.
Универсальные компоненты
Это компоненты, которые можно использовать Много раз в любом приложении Отказ
Эти компоненты:
- Должно быть многоразовый
- Должно быть очень настраиваемый
- Должен Не осознавать конкретный код для приложения в том числе модели, магазины, услуги и т. Д.
- Должен Минимизировать зависимости на сторонних библиотеках
- Следует редко быть использовано непосредственно в вашем приложении
- Следует использовать как Строительные блоки для глобальных компонентов
- Может закончиться суффиксом «База» (например, ButtonBase, ImageBase)
Это основополагающие компоненты, которые являются применением агностики и не обязательно используются непосредственно в ваших компонентах зрения, потому что они часто слишком настраиваются. Чтобы использовать их непосредственно в ваших представлениях, компоненты будут означать много копирования и вставления той же котельной. Вы также рискуете разработчики, злоупотреблявшись от высоко настраиваемых природы компонентов, которые создают непоследовательный опыт в вашем приложении.
Глобальные компоненты
Это компоненты, которые можно использовать Много раз в одном приложении Отказ
Эти компоненты:
- Должно быть многоразовый
- Должно быть минимально настраиваемый
- Может использовать конкретный код код
- Должен Воспользуйтесь универсальными компонентами , ограничивая их настраиваемость
- Следует использовать как Строительные блоки для просмотра компонентов
- Часто связывают одну к одному с экземплярами модели (например, доглистицем, Catcard)
Эти компоненты многоразовые в вашем приложении, но не легко передаются в другие приложения, поскольку они зависят от логики приложения. Это строительные блоки для компонентов зрения и других глобальных компонентов.
Они должны быть минимально настраиваются для обеспечения согласованности в вашем приложении. Приложения не должны иметь тридцать разных вариаций кнопок, а скорее должны иметь горсть разных вариаций кнопок. Это должно быть применено путем принятия высоко настраиваемого универсального компонента кнопки ButtonBase и выпечки в IT-стилях и функциональность в виде глобального компонента кнопок. Глобальные компоненты часто принимают другую форму в качестве представлений данных о модели домена.
Просмотр компонентов
Это компоненты, которые используются Только один раз в приложении Отказ
Эти компоненты:
- Должен не быть обеспокоенным повторному времени
- Скорее всего на управлять состоянием
- Получить минимальные реквизиты
- Следует связать вместе глобальные компоненты (и, возможно, универсальные компоненты)
- Часто Разрешить маршруты приложений
- Часто поддерживает специальный график недвижимости в области просмотра
- Часто имеют большое количество зависимостей
- Должно быть Строительные блоки для вашего приложения
Это самые высокие компоненты вашего приложения, которые соединяют многоразовые компоненты и даже другие виды. Это часто станут компонентами, которые разрешают маршруты и могут показать в виде компонентов уровня страницы. Они тяжелые в состоянии и света в реквизитах. Это то, что Дэн Абрамов рассмотрел бы компоненты контейнеров.
Уважание
Давайте посмотрим на универсальные и глобальные реализации кнопки обещания и посмотрите, как они сравнивают. Кнопка для обещания действует как обычная кнопка, если только обработка OnClick не возвращает обещание. В случае возвращенного обещания кнопка может условно оказывать контент на основе состояния обещания.
Обратите внимание, как уважаемая обработка позволяет нам контролировать то, что оказать в любой точке в жизненном цикле обещания, но прибуры обещания в Teal PulseLoader во время ожидающего состояния. Теперь в любое время мы используем обещание, мы гарантируем анимацию загрузки чирок, и нам не нужно беспокоиться о дублировании этого кода или предоставлять непоследовательный опыт загрузки, включая многократные анимации загрузки нескольких цветов в нашем приложении. Уважаемая база настраивается, но обещание является ограничительным.
Структура каталогов
Ниже показано, как мы можем организовать компоненты, следующие на этом шаблоне.
App/
App.js
Views/
DogListView/
Global/
Models/
Dog/
DogListItem/
Image/
PromiseButton/
Universal/
ImageBase/
PromiseButtonBase/Компонентные зависимости
Ниже иллюстрирует, как вышеуказанные компоненты зависят друг от друга.
/* App.js */
import { DogListView } from './Views'
/* DogListView.js */
import { DogListItem } from 'App/Global/Models/Dog'
/* DogListItem.js */
import Image from '../../Image',
import PromiseButton from '../../PromiseButton'
/* Image.js */
import { ImageBase } from 'Universal'
/* PromiseButton.js */
import { PromiseButtonBase } from 'Universal'Компонент нашего просмотра зависит от глобального компонента, и наши глобальные компоненты зависят от других глобальных компонентов, а также универсальных компонентов. Этот поток зависимости будет довольно распространен. Обратите внимание на использование абсолютного и относительного импорта. Приятно использовать относительный импорт при вытяжении в зависимости, которые находятся в одном модуле. Кроме того, приятно использовать абсолютный импорт при вытяжении в зависимости от модулей или когда структура вашего каталога глубоко вложена или часто меняется.
Проблема с контейнером против презентационной модели заключается в том, что она слишком трудно определить обязанности компонентов в терминах внутренней работы компонентов. Ключевым вынос является просмотр дизайна компонентов с точки зрения Компонентные интерфейсы Отказ Это имеет значение меньше реализации, которая позволяет компоненту удовлетворить его договор. Важно подумать о том, что за Настройки Компонент должен позволить и какой вид неявные и явные зависимости Компонент должен включать.
Если вы нашли эти мысли полезными и хотели бы видеть больше моих идей, не стесняйтесь проверить это репо Что я использую для поддержания моих мыслей и лучших практик для написания приложений React/Redux.