😎 Сподіваюся що ви добряче поламали вчора голову. Тепер давайте розбиратися. Тексту багато, тому буде дві частини.
Першу помилку ви знайшли досить просто і це дуже добре. Але давайте її все ж таки розберемо для всіх:
Помилка: Прямий імпорт в
buy-product.page.tsx. з main.page.tsx., або, якби б я відповідав на співбесіді, порушення принципу low coupling (низької зв'язності)Проблема: Суть проблеми полягає в тому, що сторінка
buy-product починає щось знати про код, до якого він не має жодного стосунку - сторінку main. На практиці, це призводить до того, що коли сторінка main буде перейменована, переміщена, відрефакторена - вам доведеться вносити зміни і у сторінку buy-product. Якщо ви випустите це з уваги - отримаєте баг. Ще одна проблема в тому, що, оскільки H1 належить до main, то розробники будуть думати що вони можуть вільно змінювати H1 відповідно до потреб main. Це означає, що рано чи пізно, заголовок на сторінці buy-product не очікувано зміниться і ми отримаємо ще один баг. Вирішення: Вирішити цю проблему просто - достатньо винести
H1 в окрему теку, яка призначена виключно для коду, який можна використовувати всім, наприклад shared. Цей підхід вирішить одразу дві проблеми. По-перше, ми відв'яжемо buy-product від main, а, по-друге, факт знаходження компоненту в shared буде сигналізувати всім що змінювати цей компонент потрібно з обережністю - він загальнодоступний. 👉 А для щоб не повторювати цю помилку в майбутньому ви можете використовувати просте контрольне запитання - чи має мій компонент змінюватися, коли змінюється модуль з якого я роблю імпорт?
Очевидно що зміні на
main не мають впливати на інші сторінки, а от зміни в shared - мають.Друга помилка в наступному пості...
П.М. Так мою пасхалку і не знайшли) Наступного разу зроблю приз за її знаходження)
@reactbeginners