Як розвивати свої суперсили React за допомогою контейнерного візерунка

Привіт усім! ?

Цього разу я розповім вам про цей дуже корисний шаблон у React, який називається шаблон контейнера або шаблон компонента контейнера .

Це одна з перших закономірностей, яку я дізнався. Мені дуже допомогло розділити проблеми на менші та розв’язувати їх по черзі.

Крім того, це, безумовно, допомогло зробити мій код набагато більш багаторазовим та автономним відразу.

Це може здатися парадоксальним! Як зробити так, щоб ваш код був багаторазовим і автономним одночасно?

Ну, багаторазовий, тому що ви навчитеся робити невеликі фіктивні (презентаційні) компоненти, які ви можете багато разів використовувати.

Автономний, оскільки контейнер, вигляд або все, що ви використовуєте, щоб зберегти всю свою логіку, можна легко від’єднати від одного місця та приєднати до будь-якого іншого без великих змін / рефакторингу у вашому основному додатку.

Отже, це безпрограшний варіант і таємна наддержава, яку потрібно придбати якомога швидше!

Правда полягає в тому, що коли ви хочете зробити функцію, ви завжди починаєте просто і чисто.

Минають дні, і ви можете додати сюди ще одну невелику функцію, ще одну там. Ви робите виправлення тут, виправлення там, і весь ваш код стає безладним і некерованим.

Повірте мені, я був там. І я все ще там сьогодні! Ми всі в певний момент, бо програмування - це ремесло. Але ми можемо звести це до мінімуму за допомогою практики та за допомогою цього дивовижного дизайну.

Але що таке шаблон дизайну?

01. Що таке шаблон дизайну програмного забезпечення?

Шаблон проектування - це не що інше, як загальне багаторазове рішення загальнопоширеної проблеми в рамках даного контексту при розробці програмного забезпечення. Це не закінчена конструкція, яку можна трансформувати безпосередньо у вихідний або машинний код. Це опис або шаблон для вирішення проблеми, яка може бути використана у багатьох різних ситуаціях.

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

Ви знаєте модель дизайну програмного забезпечення MVC?

02. Що таке шаблон дизайну MVC?

Ну, MVC розшифровується як Model-View-Controller. Це архітектурний шаблон, який використовується для розробки користувальницьких інтерфейсів. Він ділить додаток на три взаємопов’язані частини.

Традиційно він використовувався для графічного інтерфейсу робочого столу (графічний інтерфейс користувача). Ця архітектура стала популярною для проектування веб-додатків і навіть мобільних.

Уявіть, у вас є трикутник із трьома вершинами: View , Controller і Model .

Перегляд - це те, що користувач бачить на екрані (на стороні клієнта).

Користувач, який бачить подання, може внести зміни, натиснути кнопку, заповнити форму, натиснути кнопку відтворення, щоб переглянути відео, викликати безліч матеріалів разом.

Контролер обробляє зміни, просунуті користувачем, і всю логіку, що лежить в основі. (Він працює як ретранслятор, робить запити та обробляє все між видом та моделлю.)

Модель - менеджер. Він містить те, що називається бізнес-логікою, дані. Модель отримує інформацію від контролера і переходить до необхідних змін. Він повертає оновлення до контролера та подання.

React - це "бібліотека JavaScript для побудови користувальницьких інтерфейсів" (за визначенням?). Велику частину часу ви змішуєте і обробляєте V і частину C.

І ось цей V і цей C ми хочемо чітко відокремити від шаблону контейнера.

03. Що таке шаблон контейнера?

Контейнерний шаблон - це рішення досить добре відокремити V від C. Замість того, щоб робити лише одне /> за допомогою логіки та подання ви розділяєте його на дві частини:taine r /> та & lt; Компонент />. Перший виконає всі необхідні логічні операції та сприятиме спілкуванню з бізнесом, тоді як другий буде фіктивним презентаційним компонентом, який надаватиме все, що вимагає його батьківський контейнер.

Презентаційні компоненти стосуються того, як все виглядає . Тоді як компоненти контейнера стосуються того, як все працює .

04. Давайте забруднимо руки

Уявіть, що ми хочемо створити компонент Списку супергероїв, який відображає деякі дані про них. Ми отримаємо дані з API, і ми хочемо відобразити їх на екрані.

Гаразд, для імітації нашої моделі (бази даних) я створив фальшивий об’єкт даних. Цей об’єкт містить інформацію про супергероїв. Він також має функцію fetchFarAwayAPI (), яка повертає цей об'єкт.

Original text


Потім я створив компонент з вибором стану, щоб отримати API, зберегти відповідь у стані нашого компонента та відобразити дані в таблиці завантажувального екрану на екрані.

Гаразд, ми повністю відокремили контролер від подання. Це основна ідея, яку слід пам’ятати про шаблон контейнера.

Якщо ви уважно подивитесь, ми створили один компонент, де ми отримуємо дані, зберігаємо їх у стан і відображаємо на екрані. Ми змішали C та V. Погоджуєтесь?

Гаразд, як ми це вирішимо? Так! Візерунок контейнера!

Слідуй за мною!

Перший крок - створити презентаційний компонент для рендерінгу подання. Цей компонент отримає реквізит і відтворить його. Це абсолютно фіктивний. Поглянь:

Для обробки матеріалів, що стосуються контролера (логіки), я переробив наш старий SuperHeroList, перейменувавши його на SuperHeroListContainer.

Гаразд, ми повністю відокремили контролер від подання, і це? - головна ідея, яку ви повинні пам’ятати про те, який шаблон контейнера.

Але ...

Ми можемо піти далі і вивести складність рядків з нового компонента SuperHeroList. Як ми це робимо? Давайте створимо новий компонент SuperHeroRow:

Що ми тут зробили? Ми відокремили складність відтворення рядків поза компонентом SuperHeroList. Ми дозволяємо першому лише відображати таблицю та викликаючи SuperHeroRow, щоб зробити кожен із рядків окремо.

Ми виділили складність рядків до іншого компонента. Завжди пам’ятайте, що шаблон контейнера є там (усередині SuperHeroListContainer). Ми щойно розподілили рендеринг на два батьківські / дочірні компоненти, які є повністю фіктивними та презентаційними, використовуючи найкращий спосіб роботи React: композиція!

Ви можете вільно розподіляти обов'язки / складності на менші компоненти. Ось як вам слід працювати з React! Вам потрібно налаштувати його відповідно до того, що найкраще підходить для програми, для команди та контексту, в якому ви перебуваєте.

Іноді ми можемо трохи абстрагувати цю річ! Я думаю, що зараз у нас все добре, але ... підемо трохи далі ...

Давайте створимо другий SuperHeroList цього разу, використовуючи HOC (Компонент вищого порядку).

Компонент вищого порядку (HOC) - це вдосконалена техніка в React для повторного використання логіки компонентів. HOC як такі не є частиною API React. Вони є шаблоном, що випливає з композиційної природи React.

Конкретно, компонент вищого порядку - це функція, яка приймає компонент і повертає новий компонент.

Справа в тому, щоб перетворити наш SuperHeroListContainer у функцію JavaScript на основі ванілі. Ця функція приймає компонент (який зазвичай називають WrappedComponent) і повертає новий компонент.

Просто перевірте, як я це зробив нижче:

Ми переробили функцію, яка називається withContainer. Він отримує будь-який Компонент, який Ви хочете пройти через нього, і повертає Компонент класу з усією логікою всередині!

У цьому випадку абстракція дозволяє нам експортувати різні типи таблиць або повторно використовувати всю логіку, яку ми мали в контейнері, для виклику декількох / різних презентаційних / фіктивних компонентів.

Ось як ми отримуємо самообмеження та багаторазове використання разом?

Останнє, але не найменше

Не хвилюйтеся, якщо спочатку вам було важко визначити, як застосувати шаблон контейнера. Це ітераційний процес. Попрактикувавшись, ви потрапите туди, не довго думаючи. Це буде інтуїтивно зрозуміло, і на перший погляд це буде найкращим підходом до майже (90%) будь-чого, що ви робите в React.

React має потужну композиційну модель. Вони рекомендують використовувати композицію замість успадкування для повторного використання коду між компонентами.

ПРИМІТКА. У цій статті я використав Create React App 2.0 із Bootstrap. Ви завжди можете потягнути за собою моє репо та зробити кілька експериментів пізніше. Ви знайдете два SuperHeroLists та два приклади, які ми зробили у статті.

Продовжуйте читати мої статті і не забувайте: завжди будьте сильними і кодуйтесь !

Бібліографія

  1. Документація React
  2. Компоненти контейнера від Learn React з шантастиком ;
  3. Шаблон дизайну програмного забезпечення, з Вікіпедії, вільної енциклопедії;
  4. Model-view-controller, з wikipedia, вільної енциклопедії;
  5. Презентаційні та контейнерні зразки, Дан Абрамов;

Дуже дякую!

evedes, жовтень 2018