React的setState回调会自动绑定this吗？为何两种回调表现一致？

嘿，这个问题确实很容易让人产生疑惑！我来帮你理清背后的原因～

你原本以为直接传递方法引用给setState的回调时，this会丢失上下文，但实际两种写法都能正确输出this.state.number，核心原因在于：React在调用setState的第二个参数（回调函数）时，会自动将回调的this绑定到当前组件实例上。

具体拆解你的代码： #

1. 带箭头函数的回调写法
   在onClickWithThisBindingInCallback中，你用箭头函数作为setState的回调：

   this.setState({ number: 2 }, () => {
     this.myCallback();
   });
   

   这里箭头函数本身没有自己的this，它会继承外层上下文的this——而onClickWithThisBindingInCallback是箭头函数类属性，它的this本来就指向组件实例，所以调用this.myCallback()时，myCallback里的this自然也指向组件实例，能正确获取state。

2. 直接传递方法引用的写法
   在onClickWithoutThisBindingInCallback中，你直接把this.myCallback作为回调传给setState：

   const myCb = this.myCallback;
   this.setState({ number: 3 }, myCb);
   

   这里虽然你只是传递了方法的引用，但React内部在执行这个回调时，会主动帮我们把this绑定到组件实例上。所以myCallback执行时，this依然指向当前的Hello组件实例，自然能正确读取this.state.number。

对比容易混淆的场景 #

你可能会联想到DOM事件回调的情况——比如如果直接写<button onClick={this.myCallback}>，点击按钮时this会是undefined（严格模式下）。这是因为DOM事件的回调是由浏览器触发的，浏览器不会帮我们绑定this；而setState的回调是React内部触发的，React做了额外的绑定处理，这就是两者的本质区别。

总结一下：React对setState的回调函数做了特殊处理，自动绑定了组件实例的this，所以不管你是传递方法引用还是用箭头函数包裹，回调里的this都能正确指向组件。

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