Автор оригинала: Eduardo Vedes.
Всем привет! ?
На этот раз я собираюсь рассказать вам об этом очень полезной модели в реакции под названием Контейнер-шаблон или Контейнерный компонент шаблон Отказ
Это один из первых узоров, которые я узнал. Это помогло мне много разделить проблемы в меньших и решать их один за раз.
Кроме того, это определенно помогло сделать мой код гораздо более многоразовым и сразу.
Это может показаться парадоксом! Как вы получаете свой код, чтобы быть многоразовым и в одно и то же время?
Ну, многоразовый, потому что вы учитесь делать небольшие фиктивные (презентационные) компоненты, которые вы можете повторно использовать.
Самостоятельно содержащий, потому что контейнер, вид или все, что вы используете, чтобы сохранить всю свою логику, можно легко отсоединить из одного места и прикреплена к любому другому, без больших изменений/рефакторинга в вашем основном приложении.
Так что это Win-Win и секретная сверхдержава, которую вы должны приобрести, как только сможете!
Правда, когда вы хотите сделать функцию, которую вы всегда начинаете простые и чистые.
Дни проходят и вы получите здесь еще одну маленькую функцию, еще одна особенность. Вы делаете патч здесь, патч там, и весь ваш код становится грязным и неуправляемым.
Поверь мне, я был там. И я все еще там сейчас! Мы все, в определенный момент, потому что программирование – это ремесло. Но мы можем минимизировать это много с практикой и с этим удивительным рисунком дизайна.
Но какой узор дизайна?
01. Что такое шаблон дизайна программного обеспечения?
А Дизайн шаблона Это не что иное, как общее, многоразовое решение для общепринятого задачи в данном контексте в дизайне программного обеспечения. Это не готовый дизайн, который может быть преобразован непосредственно в исходный код или машинный код. Это описание или шаблон для решения проблемы, которая может использоваться во многих различных ситуациях.
Шаблоны проектирования являются формамизацией передовой практики, которые программист может использовать для решения общих проблем при разработке приложения или системы.
Вы знаете MVC Шаблон дизайна программного обеспечения?
02. Что такое узор дизайна MVC?
Ну, MVC стоит за Модель-просмотр-контроллер Отказ Это архитектурный узор, используемый для разработки пользовательских интерфейсов. Это делит применение на три взаимосвязанных части.
Традиционно он использовался для настольного графического интерфейса (графические пользовательские интерфейсы). Эта архитектура стала популярной для проектирования веб-приложений и даже мобильных.
Представьте, что у вас есть треугольник с тремя вершинами: Вид , Контроллер, и Модель Отказ
Вид – это то, что пользователь видит на экране (сторона клиента).
Пользователь, увидящую виду, может создавать изменения, может нажать кнопку, выполнить форму, нажмите PLAY, чтобы увидеть видео, спусковая панорировать вещи вместе.
Контроллер обрабатывает изменения, которые пользователь продвигается и вся логика позади. (Это работает как релейщик, он делает запросы и обрабатывает все между видом и моделью.)
Модель – это менеджер. Он содержит то, что называется бизнес-логикой, данные. Модель принимает информацию от контроллера и переходит к необходимым изменениям. Это дает обновления обратно контроллеру и представление.
РЕАКТ – «Библиотека JavaScript для создания пользовательских интерфейсов» (по определению?). Большую часть времени вы смешиваете и обрабатываете V и часть C.
И вот это v, и это C, которое мы хотим отделиться от узора контейнера.
03. Какой узор контейнера?
Узор контейнера – это решение, чтобы отделить довольно хорошо V от C. вместо того, чтобы делать только один <Компонент /> С логикой и представлением вы отделяете его в Два:
Председательные компоненты связаны с Как все выглядит Отказ В то время как компоненты контейнера связаны с Как вещи работают Отказ
04. Давайте грязным
Представьте, что мы хотим сделать компонент списка Superhero, который показывает некоторые данные о них. Мы принесем данные из API, и мы хотим отобразить его на экране.
Хорошо, чтобы моделировать нашу модель (базу данных), я создал поддельный объект данных. Этот объект содержит информацию супер героев. Он также имеет функцию FetchFarwaipi (), которая вернет этот объект.
Тогда я создал элементную компонент, чтобы получить API, сохранить ответ в состоянии нашего компонента, и отобразите данные в таблице Bootstrap на экране.
Хорошо, мы полностью отделили контроллер с вида. Это главная идея, которую вы должны помнить о рисунке контейнера.
Если вы возьмете вдумчивый взгляд, мы сделали один компонент, в котором мы принесем данные, сохраняйте его в состояние и визуализируйте его на экране. Мы смешали C и V. согласны?
Хорошо, как мы это решаем? Ага! Контейнерный узор!
Подписывайтесь на меня!
Первый шаг – создать презентационную компонент, чтобы сделать вид. Этот компонент будет получать реквизиты и представлять его. Это полностью манекен. Взглянем:
Для обработки контроллера (логики) материал, которые я поклонил наш старый суперхоролист, переименного в его супергеролистконтэйнеру.
Хорошо, мы полностью отделили контроллер с вида и это? Основная идея вы должны помнить о том, что такое узор контейнера.
Но…
Мы можем пойти дальше и взять сложность ряд из нового компонента супергеролиста. Как мы делаем это? Давайте создадим новый компонент суперфороров:
Что мы здесь сделали? Мы исчерпали сложность рендеринга ряд за пределами супергеролирующего компонента. Мы позволили бывшему только сделать стол и вызвать супергероров, чтобы сделать каждый из рядов в одиночку.
Мы извлекли сложность ряд к другому компоненту. Всегда помните, что узор контейнера есть (внутри супергеролистконтэйнера). Мы только что распространили рендуринг на два компонента родителей/дочерних компонентов, которые являются полностью пустыми и презентационными с использованием реакций предпочтительного способа работы: состав!
У вас есть свобода извлечения ответственности/сложности на более мелкие компоненты. Вот как вы должны работать с React! Вам нужно отрегулировать его, чтобы лучше всего для приложения, для команды, для контекста, в котором вы находитесь.
Иногда мы можем аннотация вещь немного! Я думаю, теперь мы в порядке, но … Давайте немного дальше …
Давайте создадим второй супергеролист на этот раз, используя HOC (компонент более высокого порядка).
Компонент более высокого порядка (HOC) – это передовая техника в реакции для повторного использования логики компонентов. HOCS не являются частью API API. Это шаблон, который возникает из реактивной композиционной природы.
Конкретно, Компонент более высокого порядка является функцией, которая принимает компонент и возвращает новый компонент.
Здесь вещь – реформировать наш супергеролистContainer в функцию ванильного JavaScript. Эта функция принимает компонент (обычно называемый зарпущенКомпонентом) и возвращает новый компонент.
Просто проверьте, как я сделал это ниже:
Мы изменили эту функцию
В этом случае абстракция позволяет нам экспортировать несколько видов таблиц или повторно использовать всю логику, которую мы имели в контейнере, чтобы вызвать несколько/различных презентационных/фиктивных компонентов.
Вот как мы становимся самоотверженностью и воспроизводимостью вместе?
Последний, но тем не менее важный
Не волнуйтесь, если в начале вам было трудно определить, как применить рисунок контейнера. Это итерационный процесс. С практикой вы попадете там, не много думаю. Это будет интуитивно понятно, и он будет показаться на первый взгляд лучший подход к почти (90%) все, что вы делаете в реакции.
Реакция имеет мощную модель композиции. Они рекомендуют Использование композиции вместо наследования к повторному использованию кода между компонентами.
ЗАМЕТКА: Для этой статьи я использовал создание APP APP 2.0 с Bootstrap. Вы всегда можете тянуть мой репо здесь И выполните некоторые эксперименты позже. Вы найдете два супергеролиста и два примера, которые мы сделали по статье.
Продолжайте читать мои статьи и не забывайте: всегда Будьте сильными и код на Действительно
Библиография
- Реагистрационная документация
- Контейнерные компоненты от Узнать реагировать с хендэсткой ;
- Шаблон дизайна программного обеспечения , Из Википедии, бесплатной энциклопедии;
- Модель-просмотр-контроллер , Из Википедии, бесплатной энциклопедии;
- Презентационные и контейнерные модели , Дэна Абрамовым;
Большое спасибо!
Exedes, окт 2018
Оригинал: “https://www.freecodecamp.org/news/react-superpowers-container-pattern-20d664bdae65/”