فانکشنال کامپوننت در مقابل کلاس کامپوننت

خوب اسم مقاله ترجمه: Functional Component Vs Class Component هست . با یک مثال ساده می‌خوام توضیح بدم که چرا استفاده از فانکشنال کامپوننت ها بهتر از کلاس کامپونننت هاست. البته تا این لحظه (ری اکت ۱۶.۹)‌ راهکاری برای استفاده از لایف سایکل متدها توی فانکشنال کامپوننت ها وجود نداره.

اگه صحبت های اخیر تیم ری اکت رو دنبال کرده باشید، توصیه های زیادی در مورد استفاده از فانکشن ها شده و با توجه به تغییرات جدیدی که تو ری اکت ۱۷ قراره شاهدش باشیم، بهتره که از الان به سمت تابع نویسی بریم.

خوب فرض کنید می‌خواهیم یک المان خیلی ساده رو با استفاده از ری اکت رندر کنیم:

<div> Hello World </div>

//  تگ دیو که کلمه سلام دنیا رو رندر میکنه

خوب با استفاده از کلاس کامپوننت:

همین مثال ساده رو با فانکشنال کامپوننت می‌نویسم:

البته من فانکشنال کامپوننتم رو با استفاده از arrow function نوشتم. شما می‌تونید از تعریف تابع معمولی استفاده کنید. هیچ مشکلی هم پیش نمیاد.

خوب می‌دونیم که مرورگرِ ما، هیچی از این کدها سر در نمیاره و این Babel هست که کدهامون رو ترنسپایل می‌کنه. بریم ببینیم این کلاس و تابعی که نوشتیم، بعد از ترنسپایل Babel به چه شکلی در میاد:

کلاس کامپوننتِ ما بعد از ترجمه :

خوب می‌بینیم چند خط کد ساده ای که زدیم از دید جاواسکریپت (و در نهایت مرورگر) چه شکلی دیده میشه!

حالا بریم ترجمه تابع ای که نوشتیم رو ببینیم:

خوب می‌بینیم که جاواسکریپت برای تبدیل یک کلاس کامپوننت به خروجی نهایی چه کارایی با کد ما انجام میده.

مزیت های استفاده از کلاس کامپوننت ها

استفاده از state ( که به لطف ری اکت ۱۶.۸ و هوک useState این ویژگی به فانشکال کامپوننت ها هم اضافه شد)
استفاده از Lifecycle Hooks  مثل componentDidMount  و ...

پس تا این لحظه (ورژن فعلی ری اکت ۱۶.۹) مزیت کلاس کامپوننت ها به فانکشنال کامپوننت ها فقط استفاده از Lifycycle methods هست.

جمع بندی

۱- خوانایی فانکشنال کامپوننت ها بالاتر از کلاس کامپوننت هاست ( چون همون توابع ساده جاواسکرپیتی هستند )

۲- تست کردن فانکشنال کامپوننت ها ساده تر از کلاس کامپوننت هاست.

۳- کدهای نهایی ترجمه شده ( و حتی سورس کدها )‌ با فانکشنال خیلی کوتاه تر میشه. (‌همونطور که تو مثال این مقاله دیدید)

۴- استفاده از فانکشنال کامپوننت ها به رعایت Best Practice ها کمک میکنه. یکی از مهمترین Best Practice های ری اکت جداسازی کامپوننت های نمایشی از container هاست. استفاده از فانکشنال کامپوننت ها به رعایت این موضوع کمک زیادی میکنه (وقتی کامپوننتی بنویسیم که داخلش setState نداشته باشیم )

۵- درنهایت تیم ری اکت اعلام کرده تغییرات ورژن ۱۷ مبتنی بر استفاده از فانکشنال کامپوننت ها برای افزایش کارایی و سرعت ری اکت هست و توصیه کرده تا جایی که مجبور نشدیم از کلاس کامپوننت ها استفاده نکنیم.

سایر نوشته های من در ویرگول:

Contact With me:
https://t.me/nimamohamadian
https://www.facebook.com/nimamohamadian89
https://twitter.com/Nima_Mohamadian
https://www.linkedin.com/in/nima-mohamadian-57ba63123