React类组件未绑定handler方法仍运行？为何需绑定组件方法？

首先来看这段简单的代码，它通过两个按钮以不同数值更新count值。

import "./App.css";
import React, { Component } from "react";

class App extends React.Component {
  // Initialising state
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
    // Not binding the handler function
    // this.handler.bind(this)
  }

  // Not using a arrow function
  handler(number) {
    // Changing the state
    this.setState((state) => ({ count: state.count + number }));
  }

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button
          onClick={() => {
            this.handler(+1);
          }}
        >
          Increase By +1
        </button>
        <button
          onClick={() => {
            this.handler(-1);
          }}
        >
          Decrease By -1
        </button>
      </div>
    );
  }
}

export default App;

疑问1：既没绑定handler method也没使用箭头函数，代码为何能正常运行？ #

你其实已经间接做了this指向的处理——在onClick回调里用箭头函数包裹了this.handler的调用。箭头函数的特性是会继承当前上下文的this，也就是组件实例本身，当箭头函数执行时，this.handler是在组件实例的上下文里被调用的，所以handler内部的this自然指向组件实例，能正常访问this.setState。

如果直接写onClick={this.handler}，handler会被当作普通函数执行，此时this会脱离组件实例上下文（严格模式下是undefined），才会触发报错。

疑问2：为什么需要绑定组件方法？ #

在JavaScript类中，类方法默认不会自动绑定this指向组件实例。当你把类方法作为回调传递（比如直接传给onClick）时，方法会脱离原组件的上下文执行，此时this不再指向组件实例，就无法访问this.state、this.setState等组件专属的属性和方法。

绑定的核心作用就是强制把方法的this固定指向组件实例，确保无论方法以何种方式被调用，内部都能正确访问组件的资源。常见的绑定方式有三种：

• 在构造函数中执行this.handler = this.handler.bind(this)
• 用箭头函数定义类方法：handler = (number) => { ... }
• 像你代码里的方式：在回调中用箭头函数包裹方法调用

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