为什么React类方法没有显式绑定this也能正常运行？

问题原因解答 #

核心是你在事件绑定处使用了箭头函数包裹调用的写法，天然继承了正确的this指向，不需要额外对类方法做bind绑定：

• 箭头函数没有自身的this绑定，它的this取值完全继承自定义位置的外层作用域的this。你写的() => this.handleAdd()定义在render方法内部，而类组件的render方法作为实例方法，执行时的this天然指向当前Counter组件实例，因此箭头函数内部的this就是组件实例。
• 你之前认知的「类方法未显式绑定就会丢失this」的场景，是直接将类方法引用作为回调传递的写法，也就是onClick={this.handleAdd}。这种写法相当于把handleAdd函数本身的引用传给了事件回调，触发时React会直接调用该函数没有绑定调用者，严格模式下this就会为undefined，才需要提前bind绑定。你现在的写法是给onClick传了一个匿名箭头函数，事件触发时先执行这个箭头函数，再由箭头函数里的实例this主动调用handleAdd，this指向自然正确。

额外补充说明 #

这种箭头函数包裹的写法功能完全正常，唯一的小区别是每次组件render都会生成新的匿名函数实例，如果是将该回调传递给纯子组件的场景，可能会触发子组件不必要的重渲染，这种场景下使用constructor内bind或者类属性箭头函数写法（handleAdd = () => { 逻辑 }）会更合适。

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