React类组件中使用方法时为何需要进行this绑定？

核心原因：JavaScript的this绑定规则 #

这个现象不是React的特殊设计，完全是JavaScript本身的this运行机制导致的：JS函数内的this指向是在函数被调用时确定的，和函数定义的位置没有关系。
回到给出的示例代码，render方法中写的onClick={this.handleClick}，本质是把组件实例上的handleClick方法的引用单独传递给了React的事件系统，相当于做了一次赋值操作：

// 伪代码，模拟React内部拿到回调后的逻辑
const clickCallback = this.handleClick; // 这里只拿了函数本身，没带调用上下文
// 用户点击按钮时，React直接调用这个函数
clickCallback(); 

这种脱离实例上下文单独调用函数的场景，在JS默认的严格模式下（React代码运行在严格模式），函数内部的this会是undefined，这时候在handleClick里访问this.setState就会直接抛出「无法在undefined上读取setState属性」的错误。
你可以用一段纯JS代码复现完全一样的问题，和React没有任何关系：

class Demo {
  sayThis() {
    console.log(this);
  }
}
const demo = new Demo();
// 实例直接调用，this正常指向demo实例
demo.sayThis(); // 输出Demo实例
// 把方法引用单独拿出来调用
const fn = demo.sayThis;
fn(); // 输出undefined，和React事件回调里的情况完全一致

bind方法的作用 #

构造函数里写的this.handleClick = this.handleClick.bind(this)，逻辑非常直接：
bind会返回一个全新的函数，这个新函数无论之后在什么上下文、被谁调用，内部的this都会被永久固定为传入bind的第一个参数——也就是当前组件的实例。
执行完这行赋值后，render里传给onClick的this.handleClick，已经是提前绑定好组件实例this的新函数了，后续React触发点击回调时，函数内部的this始终指向组件实例，就能正常访问this.state、this.setState等实例属性和方法。

其他不需要手动bind的等价写法 #

除了构造函数里手动调用bind，还有两种常见写法可以实现相同的效果：

• 类字段箭头函数写法（目前最常用的简写方案，利用箭头函数不绑定自身this、继承外层作用域this的特性）

class Toggle extends React.Component {
  state = {isToggleOn: true};
  // 用箭头函数定义类方法，this固定指向组件实例
  handleClick = () => {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

• render内联箭头函数包裹调用（注意每次组件渲染都会生成新的函数引用，在依赖函数引用做性能优化的场景下会有额外开销）

render() {
  return (
    <button onClick={() => this.handleClick()}>
      {this.state.isToggleOn ? 'ON' : 'OFF'}
    </button>
  )
}

这种写法里，点击触发的是内联的箭头函数，箭头函数内部的this本身就指向render作用域下的组件实例，再通过this.handleClick()的形式显式以实例为上下文调用方法，也不会出现this丢失的问题。

内容的提问来源于stack exchange，提问作者fadzrinmadu