Найкращі практики ReactJS 2019 року

[оновлення, 22 травня 2019 р.] - додайте ще одну найкращу практику до списку. Дивіться нижче.

[оновлення, 19 травня 2019 р.] - Ми додали нову статтю про Redux та Redux-Thunk. Просто пояснено з великою кількістю прикладів.

[оновлення, 23 липня 2019 р.] - Через багато запитів ми додамо нову статтю про антиреакції ReactJS. Посилання буде розміщено тут. Будь ласка, підтримайте хлопами. Дякую!

1. Ласкаво просимо, ReactJS

За останні п’ять років ReactJS стрімко збільшує свою популярність і до початку 2018 року стає більш популярною, ніж jQuery, принаймні з точки зору пошуку Google. Ми не будемо порівнювати інструменти з точки зору їх попиту в пошукових системах; однак це дає нам чітке розуміння того, що бібліотека ReactJS, безумовно, популярна. Зважаючи на це, поговоримо про використання ReactJS для створення кращих програм Front-End.

Нам дуже приємно бачити, як ви насолоджуєтеся нашими творами. Тож якщо Ви вважаєте цю публікацію корисною, натисніть кнопку below нижче :)

Що робить ReactJS настільки популярним, крім того, що Facebook створив його? Ми вважаємо, що це пов'язано з тим, що ReactJS легко працювати. Це легко засвоїти та оптимізовано для роботи за допомогою свого віртуального домену. Реалізуючи віртуальний DOM, ReactJS пропонує механізму візуалізації спосіб швидко відтворити лише ті елементи, які потрібно оновити. Як результат, розробники ReactJS отримують швидкі та приємні у користуванні програми.

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

Ось деякі тенденції за останні п'ять років від Google:

Однією з головних концепцій ReactJS є те, що ви створюєте багаторазові, згуртовані компоненти, які можна скласти разом і сформувати додаток. Кожен компонент може мати власний стан, якщо він не є станом (докладніше про це пізніше). ReactJS збирає всі ваші компоненти в одне відро і застосовує деякі методи оптимізації, такі як віртуальний DOM, щоб ефективно відображати додаток у вашому браузері.

Почнемо з роз'яснення, що таке компонент, а що - ні. Компонент є самодостатньою, незалежною частиною інтерфейсу користувача. Кожен компонент може вбудовувати інші компоненти, де кожен має свій стан та API. За умовами, ви повинні зберігати свій компонентний код в одній конкретній папці. Збереження всіх файлів для кожного компонента в одній папці дозволяє створювати багаторазові компоненти, щоб ви могли їх використовувати в інших додатках.

2. Типи компонентів ReactJS

Існує чотири основні типи компонентів ReactJS:

  1. Компоненти, що містять повний стан або клас
  2. Компоненти без стану або функціональні компоненти
  3. Презентаційні компоненти (або високого порядку)
  4. Компоненти контейнерів

Переважна структура дерева компонентів відображається зліва.

Компонентні компоненти або компоненти на основі класу

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

Ось приклад компонента ReactJS на основі штату, повного стану:

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

Стан - це об'єкт, який піддається впливу компонента. Область дії держави обмежена всередині компонента, де він оголошений. Компоненти можуть ініціалізувати стан і передати його іншому компоненту. Ми можемо оголосити стан двома способами, використовуючи конструктор або оголосивши державну власність. З другого випадку це просто синтаксичний цукор, і транспілер (наприклад, Вавілон) перетворить вашу декларацію про державну власність в конструктор для вас під кришкою. Компоненти без компонентів або компоненти на основі функцій, а також те, що React Hooks є компонентами на основі функцій, - це просто прості функції JavaScript. Компоненти на основі функцій повертають елемент ReactJS або колекцію, яка може бути "частковою складовою", як <> ... , або повністю функціональною складовою з логікою та вбудованими компонентами. Оскільки ви не можете використовувати конструктор у компоненті, заснованому на функції (ну, насправді, так ви, оскільки ReactJS v16.8), ви не можете зробити свій компонент повним станом. Це не є станом, оскільки ви не можете зберігати будь-які дані в компонентах цих типів. Найчастіше ви передаєте реквізити на компонент, що базується на функціях, щоб надати його інтерфейс користувача. Ось приклад компонента ReactJS на основі функцій без стану:

З точки зору продуктивності, практично немає різниці між використанням компонентів на основі класу та використанням компонентів на основі функцій. Механізм візуалізації ReactJS досить розумний, щоб оптимізувати це для нас.

Компоненти на основі функцій простіші у роботі та зручніші для тестування. Ось чому спільнота розробників ReactJS запропонує вам писати функціональні компоненти замість класових. Безкомпонентні компоненти на основі функцій мають деякі обмеження і по суті повинні мати одне глобальне місце для управління станом. Це відрізняється від парадигми запису компонентів ReactJS (детальніше див. Нижче).

Щоб дозволити розробникам писати повноцінні компоненти, засновані на функціях, і одночасно надати можливість використовувати методи стану та компонентів життєвого циклу, React v16.8 додав нову функцію під назвою React Hooks. По суті, React Hooks - це спроба видалити компоненти на основі класу. За допомогою React Hooks ви можете писати компоненти, що базуються на функціях, не використовуючи класи. Напевно, ми побачимо, що компоненти на основі класу будуть усунені за допомогою Hooks в якийсь момент майбутнього.

Також React Hooks має на меті спростити розробку додатків, уникаючи компонентів, у яких конструкторів немає або не потребують, хоча вони оголошені як класи. Найчастіше ви працюєте з компонентами, які не мають стану, якщо ви думаєте про ідеальний дизайн додатка. Коли ми створюємо програми ReactJS для своїх клієнтів, ми зазвичай використовуємо тонкий шар між представленням компонентів та логікою програми. Це дозволяє нам відокремити візуальне зображення компонента від його поведінки.

3. Зниження даних, дії-вгору

Що таке шаблон дизайну «Дані вниз, дії вгору»? По суті, це означає, що у вас є компонент високого замовлення (HOC - див. Пояснення нижче), який приймає дані у свої «реквізити» і передає ці дані вниз у свій перегляд або вкладені компоненти. Для взаємодії з компонентом користувачі запускають такі дії, як натискання кнопки, а компонент відповідає на цю взаємодію, випромінюючи події. Так би мовити, це викликає подію в напрямку, протилежному тому, як передані ці дані.

Ці події або дії передаються до батьківського компонента. Батьківський компонент запускає ще одну дію, яка змінює глобальний стан програми.

4. Компонент високого замовлення

Компонент високого замовлення (або HOC) - це, по суті, модель дизайну, також відома як візерунок декоратора. У ReactJS HOC - це компонент, який обгортає інший компонент, додаючи додаткову функціональність або додаткові властивості. Це дозволяє абстрагуватися від деякої часто використовуваної логіки і зберігає ваш код ДУХОМ. Це те, як ви розподіляєте складну структуру компонентів між іншими компонентами в ReactJS та спосіб розв'язати логіку програми та інтерфейс користувача. Наприклад, ви можете використовувати контейнерний компонент як HOC для компонента презентаційної кнопки.

Ось приклад компонента HOC ReactJS:

5. Компоненти контейнерів

Компоненти контейнерів, з іншого боку, мають логіку встановлення стану або мають функції передавати події до батьківського компонента. Загальне правило, щоб ваш компонент був максимально простим, маючи на увазі принцип дизайну принципу єдиної відповідальності, який по суті означає, що ваш компонент повинен робити одне, але робити це добре. Найчастіше ці типи компонентів є ГОС, які вміщують декілька презентаційних компонентів. Презентаційні компоненти Введення простих компонентів може зменшити загальну складність програми. Ось де представлені презентаційні компоненти. Ці компоненти повинні мати мінімально логічну логіку. Презентаційні компоненти приймають дані та передають події до зворотного дзвінка, який вони отримують у складі його реквізиту. По суті, цей тип компонента надає користувальницький інтерфейс і виконує функцію, передану в нього, коли відбувається якась дія в його інтерфейсі. Цей тип компонентів є будівельним блоком і його іноді називають компонентом низького порядку (або LOC).

6. Список найкращих практик

  • [Оновлення 22 травня 2019 р.] - Використовуючи ReduxJS, розділіть код редуктора на більш дрібні методи, щоб уникнути величезного JSON у межах Вашого редуктора.
  • Подумайте про використання TypeScript у своїх додатках, якщо ви цього ще не зробите.
  • Використовуйте генератор create-react-app, щоб завантажувати додаток ReactJS.
  • Тримайте свій код ДУХОМ. Не повторюйте себе, але пам’ятайте, що дублікат коду НЕ завжди поганий.
  • Уникайте великих класів, методів або компонентів, включаючи редуктори.
  • Використовуйте більш надійні менеджери для керування станом програми, наприклад Redux.
  • Використовуйте синхронізатор подій, наприклад Redux-Thunk, для взаємодії з API заднього кінця.
  • Не допускайте занадто багато атрибутів або аргументів. Обмежте себе п’ятьма реквізитами, які ви передаєте у свій компонент.
  • Використовуйте власні типи ReactJS defaultProps та ReactJS.
  • Використовуйте підводку, розбивайте занадто довгі лінії.
  • Зберігайте власний файл конфігурації jslint.
  • Завжди використовуйте диспетчер залежностей із файлом блокування, наприклад NPM чи пряжею.
  • Перевірте свій загальнодоступний код, складний і схильний до помилок код.
  • Напишіть більше тестів, які дають більше тестового покриття вашого коду з невеликими зусиллями та тестовим кодом, щоб забезпечити його належне функціонування.
  • Кожен раз, коли ви знайдете помилку, обов’язково спочатку напишіть тест.
  • Використовуйте компоненти на основі функцій, починаючи використовувати React Hooks, новий спосіб ReactJS для створення компонентів, повних стану.
  • Використовуйте ES-деструктурування для реквізиту.
  • Використовуйте умовну візуалізацію.
  • Користувач `map ()` для збору та візуалізації колекцій компонентів.
  • Використовуйте часткові компоненти, такі як `<>` ... ``
  • Назвіть обробників подій за допомогою префіксів ручки, таких як `handleClick ()` або `handleUpdate ()`.
  • Використовуйте `onChange`, щоб керувати своїми вводами, наприклад,` onChange = {this.handleInputChange ()} `.
  • Використовуйте JEST для тестування вашого коду ReactJS.

Ми згадали синхронізатори подій, такі як Redux-Thunk. ReactJS v16.3 представив нову функцію під назвою API React Context. Частина його функціональності полягає в тому, щоб імітувати функціональність редук-тунч і синхронізувати події засобами ReactJS. Це особливість, яка користується великим попитом, оскільки майже будь-яке додаток ReactJS підтримує API заднього рівня та потребує синхронізації запитів та подій. Ми будемо стежити за цим API і будемо постійно публікувати вас з оновленнями.

Ось приклад використання defaultProps та propTypes:

7. Висновок

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

Нам дуже потрібен ваш хлопак! Якщо ви вважаєте цю публікацію корисною, натисніть кнопку below нижче :) Ось наш перший для вас. Ти надзвичайний!

.

Матеріал бонусу: Ось наша остання стаття про Redux та Redux-Thunk. Ми пояснимо, як двоє працюють разом.

https://medium.com/@konstankino/2019-redux-and-redux-thunk-for-reactjs-explained-e249b70d6188