react中为什么方法需要bind

[bibi7]

其实看官方文档的时候，文档也会这么建议：

You have to be careful about the meaning of this in JSX callbacks. In JavaScript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.

由于js特殊的机制原因，this往往是在运行时决定的。不同的调用环境决定了不同的this指向。render中传进去的事件往往作为回调。所以回调函数被触发的时候this指向的是window对象，并不是指向这个组件。bind是为了重新将this绑定到组件上。
具体可读SyntheticEvent

所以也就有文档推荐的两种做法：

class LoggingButton extends React.Component {
  // This syntax ensures `this` is bound within handleClick.
  // Warning: this is *experimental* syntax.
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}