آیا می‌توان از تابع Arrow در سازنده ی یک کامپوننت React استفاده کرد؟

1. دو روش متداول
2. مزایا و معایب
   1. گزینه دوم: تابع پیکانی در سازنده
3. استفاده از ES6

استفاده از تابع پیکانی در سازنده‌ی یک کامپوننت React موضوعی است که به دو نگرش مختلف ارائه می‌شود. در اینجا به بررسی دو روش معمول برای تعریف متدها در کلاس‌های React می‌پردازیم و مزایا و معایب هر یک را بیان می‌کنیم.

دو روش متداول

1 استفاده از :

      class Test extends React.Component {
  constructor(props) {
    super(props);
    this.doSomeThing = this.doSomeThing.bind(this);
  }

  doSomeThing() {}
}

    

2 تعریف متد به عنوان تابع پیکانی در سازنده:

      class Test extends React.Component {
  constructor(props) {
    super(props);
    this.doSomeThing = () => {};
  }
}

    

مزایا و معایب

گزینه اول: استفاده از bind()

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

گزینه دوم: تابع پیکانی در سازنده

زمانی که از یک تابع Arrow در سازنده استفاده می‌شود، متد برای هر نمونه از کلاس مجدداً تعریف می‌شود. این می‌تواند منجر به استفاده بالاتر از حافظه شود، زیرا هر نمونه دارای یک کپی از متد خواهد بود. در حالی که این روش از نظر کارایی به نظر سریع‌تر است، اما در عمل می‌تواند باعث افت کارایی در برنامه‌های بزرگ شود. همچنین، قابلیت اشتراک‌گذاری متدها بین نمونه‌ها از بین می‌رود.

استفاده از ES6

در ES6 و با استفاده از ویژگی‌های جدید مانند class fields می‌توان متدها را به صورت زیر تعریف کرد:

      class Test extends React.Component {
  doSomeThing = () => {};
}

    

این روش به شما امکان می‌دهد تا کد خوانا و واضح‌تری داشته باشید، اما در صورتی که از ابزارهایی مانند Babel استفاده نکنید، این کد ممکن است با ES6 سازگار نباشد.