为什么React类组件中事件处理函数的this绑定会失效？

核心原因：ES6类方法本身就不会自动绑定this，this指向完全由调用方式决定，你觉得普通类方法不需要绑定，只是因为常规调用姿势自动做了this绑定而已。 #

1. 先澄清ES6类的this绑定逻辑

ES6类定义的方法默认是松散绑定，没有提前把this绑死到实例上：

const rect = new Rectangle(10, 20);
// 常规调用：实例.方法()，调用时自动把this绑定到前面的实例上，所以正常运行
console.log(rect.calcArea()) // 200

// 把方法单独抽出来调用
const calc = rect.calcArea;
calc() // 严格模式下this为undefined，直接报错，和React事件的情况完全一致

你之前用普通类的时候没遇到问题，只是因为你从来不会把方法单独抽出来调用，一直都是用实例.方法()的格式调用而已。

2. React事件处理this丢失的本质

你在render里写onClick={this.handleClick}的时候，本质是把handleClick这个方法的引用从组件实例上拆了下来，单独传给了React的事件系统。
等触发点击事件时，React是直接调用你传过去的这个函数引用，不是用组件实例.handleClick()的格式调用，没有给它绑定实例this，自然this就丢失了。

3. 为什么render方法里的this是正常的？

因为render方法是React内部主动调用的，调用格式就是组件实例.render()，调用时自动把this绑定到了组件实例上，所以你在render里访问this.props、this.state都正常。

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