چه زمانی یک کامپوننت را به چند کامپوننت تبدیل کنیم؟

چه زمانی به نظر منطقی می‌آید که یک کامپوننت را به چند کامپوننت تبدیل کنیم؟ آیا می‌دانستید شما می‌توانید تمام برنامه ریکت‌تان را در یک کامپوننت بنویسید؟ در واقع از نظر فنی هیچ چیز جلوی قرار دادن کل برنامه در یک کامپوننت را نمی‌گیرد. البته، آن فانشکن احتمالا بسیار بزرگ خواهد شد و هوک‌ها و State های بسیاری خواهد داشت، اما در کل، ممکن است؛ و می‌توان این کار را انجام داد.

اگر شما این روش را امتحان کرده باشید، احتمالا با مشکلات زیر روبه‌رو شده‌اید.

1. پرفورمنس سایت، قطعا رنج‌آور خواهد شد زیرا هر تغییر استیت باعث می‌شود کل برنامه ری‌رندر شود.
2. اشتراک‌گذاری کد و استفاده‌ی دوباره از کد‌ها تقریبا غیرممکن می‌شود.
3. State یک چالش خواهد بود. دانستن این‌که هر state و event handler به کدام بخش از JSX شما مربوط می‌شود، احتمالا مغز شما را درد خواهد آورد.
4. تست‌ها ۱۰۰ درصد ادغام خواهند بود: این حتما چیز بدی نیست، اما برای تست کردن edge case ها و جدا کردن چیز‌ها از بخشی که قرار است تست شود کار خیلی سختی خواهد بود.
5. کار کردن چند‌نفره در یک کد با چند مهندس فاجعه خواهد شد. آیا می‌توانید تصور کنید که چند نفر در یک فایل با گیت کار می‌کنند؟
6. اگر ما بخواهیم از کتاب‌خانه‌های مختلف استفاده کنیم، پس به هدف‌مان نرسیدیم زیرا هر کتابخانه خودش یک کامپوننت جداست. حتی اگر اجازه این کار را هم بدهیم، تکلیف HOC ها چه می‌شود؟ مثل react-emotion؟
7. کپسوله کردن انتزاعات ضروری/API ها در یک کامپوننت اعلانی، امکان‌پذیر نخواهد بود. و این به این معناست که تمام درخواست‌ها و .. به API ما باید در lifecycle یک کامپوننت خیلی بزرگ انجام شود، که باعث سخت‌تر شدن شدید کد می‌شود.

این‌ها دلایلی هستند که ما از کامپوننت‌های شخصی‌سازی شده استفاده می‌کنیم. چون باعث می‌شوند مشکلات بالا حل شود.

من قبلا در AMA خودم برای مدت زیادی یک سوال داشتم: “بهترین راه/روش برای تبدیل یک برنامه به چند کامپوننت” و جواب من این است: وقتی شما به یکی از مشکلات بالا برخوردید، آنجا دقیقا زمانی است که باید کامپوننت خودتان را به چند کامپوننت مستقل تبدیل کنید. و هرگز قبل از مواجه شدن با این مشکلات، همچین کاری نکنید. تبدیل کردن یک کامپوننت به چند کامپوننت را abstraction می‌گویند. Acstraction خیلی چیز عالی است، اما هر بار که این کار را انجام می‌دهید، با یک هزینه‌ای همراه است. و شما باید قبل از انجام آن، هزینه‌ها و فواید آن را بررسی کنید.

تکرار، به مراتب کم هزینه‌تر از abstraction پر از ضرر است. (Sandi Metz)

پس من به این که JSX ای که در یک کامپوننت return‌ می‌کنم خیلی بلند باشد، توجهی نمی‌کنم. یادتان باشد که JSX یک سری عبارت‌های جاوااسکریپت است که از api های اعلامی که کامپوننت‌ها می‌دهند استفاده می‌کند. بعضی مواقع، کد‌های طولانی خیلی بهتر از این است که همین‌طور کامپوننت‌های‌مان را کوچک‌تر کنیم تا به مشکل prop drilling هم بر بخوریم.

سخن پایانی

پس برای شکستن کامپوننت‌تان به چندین کامپوننت احساس آزادی کنید. اما نه به دلیل آن‌که کد‌های داخلش طولانی شده است. بلکه تا زمانی‌که واقعا به مشکلاتی بر نخورده‌اید، این کار را نکنید. حفظ کردن آن تا زمانی که نیاز به شکسته‌شدن نداشته باشد، تا حفظ شکسته‌شدن قبل از نیاز، بسیار آسان‌تر است.

موفق باشید.