在 React.Component 中如何优雅的绑定函数的 co

在 stub Component 的一个方法时，发现这个方法没在 prototype 上。研究了下编译后代码发现出一些猫腻，同时也引起思考：对于 React.Component 方法，如何优雅的去绑定 this。

1. 问题现象

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.method1 = this.method1.bind(this);
  }
  method1() {}
  method2 = () => {};
}

method1 和 method2，分别使用 bind函数 和 箭头函数 两种方式绑定 this。
虽然在程序运行时大多数场景没有问题，而且经常会使用箭头函数绑定。但是这两种声明方式还是有差异的。

2. 查找根因

使用官网的 create-react-app 转换代码发现，在 Demo.prototype 上只有 method1 没有 method2。

var Demo = function (_React$Component) {
  _inherits(Demo, _React$Component);
  function Demo(props) {
    _classCallCheck(this, Demo);
    var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));
    _this.method2 = function () {};
    _this.method1 = _this.method1.bind(_this);
    return _this;
  }
  _createClass(Demo, [{
    key: 'method1',
    value: function method1() {}
  }]);
  return Demo;
}(__WEBPACK_IMPORTED_MODULE_0_react___default.a.Component);

method2是在Demo的构造方法内动态添加的；而method1通过_createClass方法被声明被声明在prototype上。
_createClass内部一段代码如下

if (protoProps) defineProperties(Constructor.prototype, protoProps);

3. 疑问：那种好？

ES2015的 class 只是一个语法糖而已，最终还是通过原型等方式实现。所以方法使用prototype方式声明会更好些。
同时也意味着需要使用 bind方法绑定this。