React中为何事件处理器需构造函数绑定this而render等方法无需绑定

这个问题和React框架本身的特殊逻辑无关，完全是JavaScript原生的this绑定规则导致的，核心判断标准只有一个：函数最终执行时，是不是通过组件实例发起的调用。

为什么render、生命周期函数、代码里的api()方法不需要手动绑定 #

React内部在执行组件的生命周期、render方法时，是直接通过已经创建好的组件实例调用的，近似逻辑是：

const componentInstance = new App(props);
componentInstance.UNSAFE_componentWillMount(); // 对象方法调用，this默认绑定到前面的实例
componentInstance.render(); // 同理，this指向组件实例

这种「对象.方法()」的调用模式下，JS会默认把方法内的this绑定到前面的对象上，也就是组件实例，所以这些内置方法天然能拿到正确的this，不需要额外绑定。

你代码里自定义的api()方法不需要绑定也是同一个逻辑：它从来没有被脱离实例单独传递过，所有调用场景都是：

• 在生命周期里通过this.api()调用：这里的this已经是组件实例，通过实例调用api，api内的this自然指向实例
• 在handleSubmit里通过this.api()调用：只要handleSubmit的this正确指向实例，api的调用上下文同样不会丢

要是你把api直接作为回调传递，比如写<button onClick={this.api}>，那api的this一样会丢失，同样需要做绑定处理，和是不是自定义方法没有关系。

为什么事件处理器必须手动绑定this #

问题出在事件回调的传递方式上，看你代码里的这行：

<form onSubmit={this.handleSubmit}>

这里你并没有直接执行this.handleSubmit()，而是把this.handleSubmit这个函数的引用单独摘出来，传给了DOM节点的onSubmit属性。等用户触发表单提交时，事件系统是直接拿这个存下来的函数引用独立执行的，近似逻辑是：

// 事件绑定阶段：只存了函数本身的引用，和组件实例完全脱钩
const submitCallback = this.handleSubmit;

// 事件触发阶段：直接执行裸函数，没有实例前缀
submitCallback(event);

这种直接调用普通函数的模式下，JS严格模式里函数内的this会是undefined，根本拿不到组件实例，自然就调用不了setState、this.api()这些实例方法。
你在构造函数里写this.handleSubmit = this.handleSubmit.bind(this)，本质就是提前把handleSubmit函数的this永久固定为当前组件实例，之后不管谁、在什么场景下调用这个被处理过的函数，它内部的this都不会变，始终指向组件实例。

补充：如果把事件传参写成箭头函数形式onSubmit={(e) => this.handleSubmit(e)}，也不需要在构造函数里绑定——因为箭头函数本身没有自己的this，会继承渲染时外层的组件实例this，事件触发时执行箭头函数，内部还是通过实例调用handleSubmit，上下文同样不会丢失。

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