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>
    );
  }
}