react绑定this的几种方式

React可以使用React.createClass、ES6 classes、纯函数3种方式构建组件。
使用React.createClass会自动绑定每个方法的this到当前组件。但是需要注意随着React 16版本的发布官方已经将改方法从React中移除。
但使用ES6 classes或纯函数时，为了在回调中使用 this，这个绑定是必不可少的，但是需要靠手动绑定this了。接下来介绍React中三种绑定this的方法

1、在构造函数内使用bind
为了避免在render中绑定this引发可能的性能问题，我们可以在constructor中预先进行绑定。这种方法很明显在可读性和维护性上没有第2种和第3种有优势。

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isToggleOn: true,
    };

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(){
       this.setState(prevState => ({
          isToggleOn: !prevState.isToggleOn
       }));
  }
  render() {
    return (
      <button onClick={this.handleClick}>
         方法1 {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button> 
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

2、render方法中直接使用bind()
这种方法很简单，可能是大多数初学开发者在遇到问题后采用的一种方式。然后由于组件每次执行render将会重新分配函数这将会影响性能。特别是在你做了一些性能优化之后，它会破坏PureComponent性能。不推荐使用

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isToggleOn: true,
    };

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(){
       this.setState(prevState => ({
          isToggleOn: !prevState.isToggleOn
       }));
  }
  render() {
    return (
     <button onClick={this.handleClick.bind(this)}>
         方法2{this.state.isToggleOn ? 'ON' : 'OFF'}
     </button> 
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

3、render方法中使用箭头函数（）=>{}
这种方法使用了ES6的上下文绑定来让this指向当前组件，但是它同render方法中直接使用bind()存在着相同的性能问题，不推荐使用

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isToggleOn: true,
    };

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(){
       this.setState(prevState => ({
          isToggleOn: !prevState.isToggleOn
       }));
  }
  render() {
    return (
     <button onClick={( ) => {this.handleClick()}}>
         方法3{this.state.isToggleOn ? 'ON' : 'OFF'}3
        </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

4.在定义阶段使用箭头函数绑定
要使用这个功能，需要在.babelrc种开启stage-2功能，绑定方法如下：

class Toggle extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick = () => {
    this.setState(prevState => ({
          isToggleOn: !prevState.isToggleOn
       }));
  }

  render() {
    return (
      <div onClick={this.handleClick}>test</div>
    )
  }
}

复制代码这种方法有很多优化：
箭头函数会自动绑定到当前组件的作用域种，不会被call改变
它避免了第2种和第3种的可能潜在的性能问题
它避免了第4种绑定时大量重复的代码

总结：
如果你使用ES6和React 16以上的版本，最佳实践是使用在定义阶段使用箭头函数来绑定this
原作者：Monster000