1. 當(dāng)使用es5時(shí)，是不需要用.bind()的。
   當(dāng)使用es5 時(shí)，React會(huì)自動(dòng)幫助我們給每一個(gè)function綁定一個(gè)this，所以我們不再需要手動(dòng)綁定。
   例如：

var HelloWorld = React.createClass({
  getInitialState() {
    return { message: 'Hi' };
  },

  logMessage() {
    // this magically works because React.createClass autobinds.
    console.log(this.state.message);
  },

  render() {
    return (
      <input type="button" value="Log" onClick={this.logMessage} />
    );
  }
});

2. 當(dāng)使用es6時(shí)，es6不會(huì)再自動(dòng)的幫助我們綁定函數(shù)，這時(shí)我們就需要使用.bind(this).
   例如：

class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: 'Hi' };
  }

  logMessage() {
    // This works because of the bind in render below.
    console.log(this.state.message);
  }

  render() {
    return (
      <input type="button" value="Log" onClick={this.logMessage.bind(this)} />
    );
  }
}

3. 在es6中，我們也可以使用箭頭函數(shù)來(lái)避免使用.bind(this)
   例如:

class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: 'Hi' };
  }

  logMessage() {
    // This works because of the arrow function in render below.
    console.log(this.state.message);
  }

  render() {
    return (
      <input type="button" value="Log" onClick={() => this.logMessage()} />
    );
  }
}

同樣,我們也可以在logMessage的實(shí)現(xiàn)中國(guó)使用箭頭函數(shù)。
例如：

class HelloWorld extends React.Component {
  // Note that state is a property,
  // so no constructor is needed in this case.
  state = {
    message: 'Hi'
  };

  logMessage = () => {
    // This works because arrow funcs adopt the this binding of the enclosing scope.
    console.log(this.state.message);
  };

  render() {
    return (
      <input type="button" value="Log" onClick={this.logMessage} />
    );
  }
}

原文鏈接：https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56