React ES6 类组件方法的绑定

从 React 0.13.0 就开始支持使用 ES6 类来新建 React 组件，方法遵循与普通 ES6 的 class 中相同的语义。也就是说方法不会自动绑定 this 到实例中，你必须在构造函数中显式的使用 .bind(this)。

ES6 方案

看下面代码：

class Greeting extends React.Component {
  constructor(props) {
    super(props);
    this.state = {message: 'Hello!'};
    // 这一行很重要！
    this.sayHello= this.sayHello.bind(this);
  }

  sayHello() {
    alert(this.state.message);
  }

  render() {
    // 因为 `this.sayHello` 是绑定的，所以我们可以使用它作为一个事件处理程序。
    return (
      <button onClick={this.sayHello}>
        Say hello
      </button>
    );
  }
}

ES5 方案

在 createReactClass()中，并不需要这么做，因为方法可以自动绑定。

class Greeting extends React.Component {
  constructor(props) {
    super(props);
    this.state = {message: 'Hello!'};
  }
  // 警告：这个语法是实验性的！
  // 这里使用箭头绑定方法：
  sayHello = () => {
    alert(this.state.message);
  }

  render() {
    return (
      <button onClick={this.sayHello}>
        Say hello
      </button>
    );
  }
}

或者更早版本（16.0.0 以前）用法:

var Greeting = React.createReactClass({...})

这意味着使用 ES6 类组件方式，对于事件处理函数需要编写更多的代码 ，但是这种方式在大型应用中具有更好的性能。

如果你不想使用样本代码，你可以使用 Babel 启用实验性的类属性语法提案：

class Greeting extends React.Component {
  constructor(props) {
    super(props);
    this.state = {message: 'Hello!'};
  }
  // 警告：这个语法是实验性的！
  // 这里使用箭头绑定方法：
  sayHello = () => {
    alert(this.state.message);
  }

  render() {
    return (
      <button onClick={this.sayHello}>
        Say hello
      </button>
    );
  }
}

请注意，上述语法是实验性的，并且这个语法将来可能会发生变化，或者这个提案可能不会纳入语言范畴。

如果你想更稳妥的方法，你有以下选择：

• 在构造函数中绑定方法。
• 使用箭头函数，例如，onClick={(e) => this.sayHello(e)}。
• 保持使用 createReactClass 或者 React.createReactClass。

注意：ES6 中函箭头数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。this 指向的固定化，并不是因为箭头函数内部有绑定 this 的机制，实际原因是箭头函数根本没有自己的 this，导致内部的 this 就是外层代码块的 this。