Найкращі практики React, які повинен знати кожен розробник

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

1. Малі та специфічні функціональні компоненти

Як ми знаємо React дозволяє розробляти великі компоненти, які здатні виконувати різні завдання. Проте, найкраще їх структурувати так, щоб кожен виконував певну мету, зберігаючи компоненти простими. Завдяки React, розробники створюють багаторазові UI компоненти. Компоненти меншого розміру легше читати та розуміти з точки зору їх функціонування, а також їх простіше оновлювати. В результаті цього, використання коду стає набагато зручнішим. Кожен компонент, як правило, короткий (100-200 рядків), тому для інших програмістів легше розуміти і налаштовувати код.

2. Не використувуйтe індекси як Key Prop

Під час візуалізації масивів можна використовувати індекс як ключ.

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

3. Використовуйте фрагменти замість <Div>, де це можливо

Компоненти React повинні повертати код загорнутий в один тег, зазвичай це <div> або фрагмент React. Потрібно вибирати фрагменти, де це є можливо. Використання <div> збільшує розмір DOM, особливо у великих проектах, оскільки чим більше тегів або вузлів DOM, тим більше пам'яті потрібно веб сайту та більше потужності використовує веб браузер для того, щоб завантажити веб сайт. Це призводить до зменшення швидкості завантаження сторінки та до потенційно поганого досвіду користувача (User Experience).

4. Віддавайте первагу передачі об'єкта

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

5. Написання чистого та читабельного коду за допомогою JSX

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

6. DRY свій React код

DRY означає “Don't repeat yourself” (“не повторюйся”). Як ви вже здогадались, тут це означає - не повторюй свій код. Це спрямовано на те, щоб уникнути випадків повторення коду. Найкращі практики React пропонують вам точний і стислий код, що робить його придатним і простим. Питання полягає в тому, як ви дізнаєтесь, чи збираєтесь об'єднати повторюваний код? Отже, вам потрібно шукати схожості і якщо ви знайдете їх, то це означає, що ви дублюєте код.

7. Дотримуйтеся правил іменування

Варто завжди використувувати PascalCase під час іменування компонентів, щоб відрізнити їх від інших некомпонентних файлів JSX. Наприклад: NavMenu, LoginButton… Використовуйте СamelCase для функцій всередині компонентів React, таких як handleClick() чи showElement().

8. Використовуйте деструктуризацію об'єктів для Props

Замість передачі об'єкта props використовуйте деструктурування об'єкта, щоб передати ім’я prop. Це відкидає потребу посилатися на об'єкт props кожного разу, коли потрібно його використовувати. Наприклад, нижче наведено компонент, який використовує props як є.

При деструктуризації обєкта ви звертаєтесь безпосередньо до тексту.

9. Динамічно візуалізовуйте масиви (Arrays) використовуючи Map

Використовуйте map() для динамічного відтворення повторюваних блоків HTML. Наприклад, можна використовувати map() для відтворення списку елементів у тегах <li>.

10. Компоненти вищого порядку (Higher-Order Components (HOC))

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

Висновок

Найкращі практики, згадані вище: використання деструктуризації JavaScript для позбавлення надмірності, використання інструментів (tools) розробника React, практика умовного рендерингу (Conditional rendering). Ми сподіваємося, що ці найкращі практики допоможуть вам правильно налаштовувати проекти, вдосконалювати ваш код, навички програмування та продуктивність програми.

Джерело: http://surl.li/iixza
Переклад: Iryna Tymo
Редактор: Аліна Берестень
Адміністратор: Дмитро Берестень