Мрія кожного розробника – писати менше коду і, якщо можливо, зробити його придатним для повторного використання. У React це означає, що потрібно знати, як правильно відокремити логіку компонента від його представлення. Легше сказати, ніж зробити, чи не так? Перш ніж ми почнемо, розгляньмо фундаментальне поняття «зв'язування».

• Зміст статті

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

Зв'язування (Coupling)

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

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

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

Якщо розглядати React-компонент як представлення чистого компонента, то можна сказати, що він може бути пов'язаний з багатьма речами:

• Бізнес-логіка, яка визначає його поведінку (хуки, кастомні хуки тощо).
• Зовнішні служби (API, бази даних тощо).
• Інший компонент React (наприклад, компонент, що відповідає за керування станом форми).
• Модифікування тісного зв’язку, може призвести до непередбачуваних побічних ефектів на інші частини системи.

Розглянемо цей компонент докладніше.

import { useCustomerHook } from './hooks';
 
 
const Customer = () => {
   const { ім'я, прізвище } = useCustomerHook();
   повернення (
     <div>
       <p>{name}</p>
       <p>{прізвище}</p>
     </div>
   );
};

На перший погляд, все здається чудовим, але насправді у нас проблема: цей компонент поєднаний зі спеціальним хуком useCustomerHook, який отримує дані клієнтів із зовнішнього сервісу. Таким чином, наш клієнтський компонент не є «чистим» компонентом, оскільки він залежить від логіки, яка не пов’язана виключно з представленням його інтерфейсу користувача.

Тепер розглянемо, що спеціальний хук useCustomerHook також використовується в інших компонентах. Що ми можемо очікувати, якщо вирішимо його змінити? Що ж, нам слід підготуватися до досить великої роботи, тому що нам доведеться змінити всі компоненти, які його використовують і пов’язані з ним.

Відокремлення логіки компонента React