bind یا arrow Function ؟

سلام

بخوام خیلی سریع جواب بگیری و دیگه بقیه رو مطالعه نکنی از نظر performance استفاده از bind بهتر ولی این مورد به معنای این نیست که اگر از arrow function استفاده بکنی آنچنان تفاوتی بوجود میاد که خیلی چشم گیر باشه

در پروژه ای که کوچیک باشه خیلی تفاوت مشهود نیست ولی هر چه قدر بزرگتر بشه این مورد میتونه روی performance و مصرف حافظه اثرگذار باشه

مورد بعدی هم مربوط میشه به بحث تست نویسی که اگر از bind استفاده بشه راحتر میتونی تست بنویسی که در سرفصل مربوط این مورد رو بررسی میکنیم

بیایم یک مثال از هر دو تا رو با استفاده از babel تبدیل بکنیم تا ببینیم خروجی هر کدوم چه چیزی میشه و اینطوری راحت تر میشه تفاوت رو متوجه شد:(البته یکم از خروجی babel رو حذف کردم مواردی که نیاز نبود برای این موضوع)

class A extends Component{
    constructor(props) {
        this.handelClick = this.handelClick.bind(this);
    }

    handelClick() {
        console.log('clicked');
    }

    render() {
        return <div onClick={this.handelClick}>Click</div>
    }
}

خروجی babel:

"use strict";

var A = /*#__PURE__*/function (_Component) {
  _inheritsLoose(A, _Component);

  function A(props) {
    var _this;

    _this.handelClick = _this.handelClick.bind(_assertThisInitialized(_this));
    return _assertThisInitialized(_this);
  }

  var _proto = A.prototype;

  _proto.handelClick = function handelClick() {
    console.log('clicked');
  };

  _proto.render = function render() {
    return /*#__PURE__*/React.createElement("div", {
      onClick: this.handelClick
    }, "Click");
  };

  return A;
}(Component);

class B extends Component{
    constructor(props) {
        this.handelClick = this.handelClick.bind(this);
    }

    handelClick() {
        console.log('clicked');
    }

    render() {
        return <div onClick={() => this.handelClick()}>Click</div>
    }
}

خروجی babel:

"use strict";

var B = /*#__PURE__*/function (_Component) {
  _inheritsLoose(B, _Component);

  function B(props) {
    var _this;

    _this.handelClick = _this.handelClick.bind(_assertThisInitialized(_this));
    return _assertThisInitialized(_this);
  }

  var _proto = B.prototype;

  _proto.handelClick = function handelClick() {
    console.log('clicked');
  };

  _proto.render = function render() {
    var _this2 = this;

    return /*#__PURE__*/React.createElement("div", {
      onClick: function onClick() {
        return _this2.handelClick();
      }
    }, "Click");
  };

  return B;
}(Component);

خروجی تقریبا یکسان فقط با این تفاوت که اگر اون بخش مربوط به تعریف onClick رو در هر دو نگاه بکنی یک تفاوت مشهودی رو میتونی ببینی اینکه در زمانی که از arrow function استفاده بکنی هر زمانی که یک نمونه از این کامپوننت ایجاد بشه یک تابع هم اضافه میشه و همچنین هر زمانی که کامپوننت دوباره رندر بشه این تابع دوباره تعریف میشه

در benchmark هایی هم که برای استفاده از این موارد انجام شده استفاده از bind در مقایسه با بقیه performance بهتری داشته

بازم تاکید میکنم این موارد در scale بالا خودش رو نشون میده در پروژه های معمولی تقریبا تفاوتی نداره

برای راحتی کار میشه از قابلیت decorator  استفاده کرد که البته هنوز در js استاندارد نشده ولی میشه با استفاده از یک سری پکیج از این قابلیت بهره برد مثل autobind-decorator

من شخصا همچنان ترجیح میدم که از bind استفاده بکنم و شاید این یک سلیقه و عادت شخصی باشه و به این معنا

نیست شما هم حتما باید از این روش استفاده بکنید

سپاس استاد از راهنمایی خوبتون. من از روش سوم استفاده میکنم
 

sampelMethod=() =>{//} 

آیا مشابه روش دومی که گفتید عمل میکنه؟