Реагуйте на найкращі практики та корисні функції

Останнім часом React стає новим інструментом, який розробники використовують для створення всього, від однієї сторінки до мобільних додатків. Але після того, як я почав заглиблюватися в React, я побачив усі ці «круті» модулі вузлів, які надзвичайно погано розвинені. Вони не дотримуються ніяких правил, компоненти занадто великі. Вони використовують стан майже для всього, і вони не використовують тупі компоненти. Кожен, хто має достатньо досвіду, розуміє, яку кількість клопоту потрібно підтримувати та скільки навантаження на нього потребує браузер, якщо кожен раз рендерировать кожен компонент. У цій статті я ознайомлю вас з передовою практикою React, як щодо налаштування React, так і як зробити це надзвичайно швидко.

Зауважте, я продовжуватиму оновлювати цю статтю, коли з'являться нові практики.

Перш ніж розпочати читання, зверніть увагу, React - це бібліотека функціонального програмування (FP). Якщо ви не знаєте, що таке FP, прочитайте цю відповідь Stack Exchange.

Використовуйте ES6 (перекладено з Babel)

ES6 полегшить ваше життя. Це змушує JS виглядати і відчувати себе більш сучасним. Один чудовий приклад із ES6 - «Генератори та обіцянки». Згадайте, коли був час, коли вам довелося робити купу вкладених дзвінків, щоб мати можливість робити асинхронний дзвінок. Ну а тепер я радий вітати вас занадто синхронним асинхронним JS (так це круто, як це звучить). Одним чудовим прикладом цього є генератори:

Де це:

Перетворюється на це:

Використовуйте Webpack

Рішення про використання Webpack просте: гаряче перезавантаження, мінімізовані файли, модулі вузлів :), і ви можете розділити свої додатки на невеликі шматки та ледаче завантажувати їх.

Якщо ви плануєте будувати широкомасштабний додаток, рекомендую прочитати цю статтю, щоб зрозуміти, як працює ледача завантаження.

Використовуйте JSX

Якщо ви походите з веб-розробки, JSX буде відчувати себе дуже природно. Але якщо ваш досвід перебуває в Інтернеті, не переживайте занадто сильно, JSX вивчити дуже просто. Зауважте, що якщо ви не використовуєте JSX, додаток буде важче підтримувати.

Завжди дивіться на свій розмір пакета

Одним із порад щодо зменшення способу набору пакетів є імпорт безпосередньо з кореневого шляху модуля вузла.

Зробити це:

імпортувати Foo з "foo / Foo"

замість:

Імпортувати {Foo} з "foo"

Зберігайте невеликі компоненти (дуже маленькі)

Правило полягає в тому, що якщо ваш метод візуалізації має більше 10 рядків, ймовірно, занадто великий. Вся ідея використання React - це повторне використання коду, тому якщо ви просто кинете все в один файл, ви втрачаєте красу React.

Що має мати власний компонент?

Мислення React потрібно подумати про повторне використання коду та структуру коду. Ви б не створили компонент для простого елемента введення, який містить лише один рядок коду. Компонент - це сукупність елементів HTML, які користувач сприймає як один. Я знаю, що це звучить трохи дивно, але давайте бачити приклад. Погляньте на цей екран входу:

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

Що тут не так? Повторення. Входи містять однакову структуру, чому б не зробити цей компонент.

Тепер це прекрасно. Я не буду тут детально описуватись, але якщо ви хочете продовжити читання, перейдіть до Thinking React.

Що з державою?

Найкраща практика в React - мінімізувати свій стан. Одне, що потрібно пам’ятати - це уникати стану синхронізації між дитиною та батьком. У наведеному вище прикладі у нас є форма, в якій стан передається у вигляді реквізиту перегляду, і кожен раз, коли користувач оновлює пароль та ім’я користувача, стан оновлюється у представленні, а не у формі.

Використовуйте ShouldComponentUpdate для оптимізації продуктивності

React - це шаблонна мова, яка надає КОЖНЕ ЧАС реквізит або стан компонента змінюється. Тож уявіть, що вам потрібно буде відображати всю сторінку щоразу в дії. Це сприймає велике навантаження на браузер. Ось тут і приходить ShouldComponentUpdate, кожного разу, коли React надає подання, він перевіряє, чи не повертається файл mustComponentUpdate false / true. Тож коли ви маєте статичний компонент, робіть собі послугу та повертайте помилкові. Або якщо немає статичної перевірки, щоб перевірити, чи змінився реквізит / стан.

Якщо ви хочете прочитати більше про оптимізацію продуктивності, прочитайте мою статтю про React Perf

Подумайте про незмінність

Якщо ви приїжджаєте зі Scala чи інших високоефективних мов, незмінність - це концепція, яку ви, мабуть, дуже добре знайомі. Але якщо ви не знайомі з цією концепцією, подумайте про незмінність, як мати близнюків. Вони дуже схожі і виглядають однаково, але не рівні. Наприклад:

Що щойно сталося? Object2 був створений як посилання на object1, що означає, що в будь-якому сенсі слова object2 є іншим способом посилання на object1. Коли я створив object3, я створив новий об’єкт, який має таку ж структуру, що і object1. Функція Object.assign приймає новий об'єкт, а потім клонує структуру object1, тому створюючи нове посилання, тому при порівнянні object1 з object3 вони відрізняються. Чому це важливо? Подумайте про оптимізацію продуктивності, я вже згадував вище, що React рендерінг здійснює щоразу, коли стан компонента змінюється. Використовуючи функцію ShouldComponentUpdate, замість того, щоб робити глибоку перевірку, чи всі атрибути різні, ви можете просто порівняти об'єкти. Якщо ви хочете дізнатися більше, продовжуйте читати цю статтю.

Використовуйте розумні та німі компоненти

Тут багато чого сказати, крім того, що вам не потрібно мати стан у кожному об'єкті. В ідеалі у вас буде розумний погляд батьків, і всі діти - це німі компоненти, які просто отримують реквізит і не мають в цьому ніякої логіки. Ви можете створити німий компонент, зробивши щось подібне:

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

Використовуйте PropTypes

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

Завжди пов'язуйте функції методом конструктора

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

someFunction = () => {
}

Використовуйте Redux / Flux

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

Майте на увазі, що іноді дуже корисно використовувати Redux / Flux, але, можливо, вам не потрібно буде тримати весь стан вашої програми в одному простому об'єкті. Детальніше про це читайте тут.

Використовуйте normalizr

Тепер, коли ми говоримо про дані, я хочу взяти момент і ознайомити вас зі святим моментом роботи зі складними структурами даних. Normalizr структурує ваші вкладені об’єкти json на прості структури, які ви можете змінювати під час руху.

Структура файлу

Я зроблю тут тупу заяву і скажу, що я бачив лише 2 файлові структури з React / Redux, що полегшує роботу.

Перша структура:

Друга структура:

Використовуйте контейнери (Depraced - 2017 Next Update Next Chapter)

Причина, по якій ви хочете використовувати контейнери, що передають дані, полягає в тому, що ви хочете уникати підключення кожного виду до магазину під час роботи з Flux / Redux. Найкращий спосіб зробити це - створити два контейнери. Один, що містить усі захищені представлення даних (представлення, для яких потрібна автентифікація), і один, що містить усі незахищені представлення. Найкращий спосіб створити батьківський контейнер - клонувати дітей та передавати потрібний реквізит.

Приклад:

Використовуйте шаблони замість контейнерів

Під час роботи з контейнерами та клонування реквізиту до поглядів я знайшов більш ефективний спосіб зробити це. Те, як я рекомендую його зараз замість використання контейнерів, - це створити BaseTemplate, який розширюється AuthenticationTemplate та NotAuthenticatedBaseTemplate. У двох шаблонах ви додасте всі функціональні можливості та стан, який ділиться у всіх видах без підтвердження / автентифікації. У поданнях замість розширення React.Compone ви розширюєте шаблон. Таким чином ви уникаєте клонування будь-яких об'єктів і можете фільтрувати реквізити, що надсилаються вниз до компонентного дерева.

Уникайте реф

Refs лише ускладнить ваш код. Плюс при використанні рефлексу ви безпосередньо маніпулюєте віртуальним Домом. Що означає, що компонент повинен буде відтворити все дерево Dom.

Використовуйте перевірку додатку

PropTypes зробить ваше життя набагато кращим при роботі з великою командою. Вони дозволяють вам, здавалося б, налагоджувати свої компоненти. Вони також значно полегшать вашу налагодження. Таким чином ви встановлюєте стандартні вимоги до конкретного компонента.

Інші коментарі

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

Використовуйте роутер: тут немає нічого сказати, крім того, якщо ви хочете створити додаток для однієї сторінки, вам потрібен маршрутизатор. Я особисто використовую React Router.

Якщо ви використовуєте флюс, не забудьте відв’язати прослуховування магазину для зміни подій. Ви не хочете створювати витоки пам'яті.

Якщо ви хочете динамічно змінити назву вашої програми, ви можете зробити щось подібне:

Цей РЕПО є чудовим прикладом автентифікації React / Redux.

Що нового у 2017 році

Підготуйтеся до великого переписування. Творці реагують зараз відновлюють реагує ядро. Він має кращу продуктивність, кращу анімацію та більше API, які можна використовувати для створення великих додатків. Більше ви можете прочитати тут.

Корисні допоміжні функції

Наступна функція - це функція порівняння об'єктів. Використання: перевірте, чи змінилися стан або реквізит у вартостіComponentUpdate

Динамічно створюйте редуктор

Використання:

Створення констант:

Візуалізуйте, якщо:

Використання: візуалізувати компонент, якщо щось перевірити

Динамічно змінюйте значення стану:

Мій webpack.config.js

Прочитайте про додатки високої продуктивності React тут.

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

Слідкуйте за мною на Twitter @nesbtesh