React + Redux - найкращі практики

Ця стаття в основному зосереджена на впровадженні деяких передових практик, яких я дотримуюся, будуючи широкомасштабні програми за допомогою React та Redux.

Диференціюйте презентаційні компоненти та компоненти контейнерів.

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

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

Компоненти контейнерів призначені для отримання даних із магазину скорочення та надання даних презентаційним компонентам. Вони, як правило, державні.

Презентаційний компонент повинен бути функціональним компонентом без стану, як показано:

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

Бали, які слід зазначити:

  • Ми можемо побачити покращену продуктивність при використанні функціональних компонентів без стану. Ці компоненти уникають зайвих перевірок і розподілу пам’яті, а тому є більш ефективними.
  • Тестувати компонент буде легко, якщо ви пишете компонент максимально просто, розділяючи презентаційні компоненти та компоненти контейнерів.
Використовуйте bindActionCreators для диспетчерських дій

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

Уникайте цього.

Уникайте цього.

Замість цього робіть.

У наведеному вище коді filterTalentPoolDataBySkills in bindActionCreators доступний як this.props.filterTalentPoolDataBySkills для відправки вашої дії. Це полегшить підтримку коду для тривалої роботи.

Намагайтеся уникати використання гачок життєвого циклу setState та компонентів під час використання Redux:

Керуйте станом програми за допомогою магазину redux, коли він є глобальним станом. Постарайтеся уникати використання setState у своєму компоненті, коли ви використовуєте бібліотеки державного управління, такі як redux. Використовуйте стан компонентів, коли це має сенс, тобто. Компонент кнопки, який показує підказку при наведенні, не використовує Redux.

Уникайте цього робити.

Замість цього робіть.

Тут ми використовували магазин redux для отримання стану та прямого відображення у вигляді. Не потрібно знову використовувати гачки життєвого циклу setState та компонентів. Redux є там, щоб зробити роботу з управління державою за вас.

Використання .bind () найкращим чином:

Існує два способи прив’язки користувацького компонента до цієї області.

  1. Зв’язування їх у конструкторі.

Таким чином створюється лише одна додаткова функція під час створення компонента, і ця функція використовується навіть при повторному виконанні візуалізації.

2. Прив’язка в момент передачі як опорної величини.

Метод .bind () створює нову функцію кожного разу, коли вона запускається, цей метод приводить до створення нової функції кожного разу, коли виконується функція візуалізації. Це має певні наслідки для продуктивності. У малих програмах ми їх не помічаємо, де, як і у великих програмах, ми можемо їх помітити. Тому не бажано прив'язувати функцію під час передачі як значення опори.

Рішення:

  1. Краще зв’язати свої власні функції в конструкторі.
  2. Існує плагін Babel під назвою перетворення властивостей класу. Ви можете записати функцію автоматичного зв’язування за допомогою синтаксису жирової стрілки.

Якщо ми бачимо вищевказаний код, функцій для прив'язки немає.

Використовуйте функції аксесуара

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

Це дозволить легко додати типи потоку для своїх функцій.

Напишіть чистіший код за допомогою функцій ES6

Написання більш чистого коду зробить життя розробників легким для розуміння та підтримки коду. Особливості ES6 дадуть нам набагато чіткіший спосіб написання коду в React.

Використовуйте атрибути знищення та розповсюдження:

Уникайте цього.

Замість цього робіть.

Використовуйте функції стрілок:

Уникайте цього:

Замість цього робіть.

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

Одне впевнене, що очікується, що перевірка типу буде майбутнім JS. Як правило, у багатьох розробників виникає плутанина між тим, що потрібно реалізувати між потоком і typecript, і наскільки плавно вони можуть бути інтегровані в поточний проект.

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

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

Переваги використання потоку:

  1. Вчасно виявити помилки або помилки.
  2. Повідомляє мету функції.
  3. Це зменшує складну обробку помилок.
  4. Видаляє помилки типу виконання.
Використовуйте бібліотеку axios для запитів http через jQuery ajax:

API отримання та axios - це найбільш переважний спосіб отримання http-запитів. Між цими двома є деякі переваги використання бібліотеки axios. Вони є

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

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

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

Приклад:

Перевірте свої компоненти React

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

У програмі React to test ми використовуємо Jest та Enzyme. Jest був створений Facebook і є тестовою основою для тестування javascript та коду React. Разом з Ензимом Airbnb, який є утилітою для тестування, це ідеально підходить для легкого тестування вашої програми React.

Використовуйте ES Lint для кращого використання умов кодування.

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

Для React конкретні правила зв’язування йдуть з eslint-plugin-react.

Для зв’язування типів потоків правила переходять із eslint-plugin-flowtype та eslint-plugin-flowtype-помилками.