React类中箭头函数与普通函数形式方法的差异咨询

嘿，作为React新手搞不清这俩写法太正常啦！我来给你把核心差异掰扯明白：

1. this的绑定规则是最大区别 #

这是最关键的一点，直接影响你在方法里能不能正常访问组件实例的属性和方法：

• 普通方法doSomething() { ... }：
  这是ES6类的标准方法定义，它的this是动态绑定的——也就是说，this指向谁完全取决于这个方法的调用方式。比如你把它直接传给React组件的onClick事件，当按钮被点击时，这个方法是被单独调用的，此时this会变成undefined（严格模式下），导致你没法在方法里用this.setState或者访问实例属性。
  解决办法要么是在构造函数里手动绑定this：this.doSomething = this.doSomething.bind(this)，要么是调用的时候用箭头函数包裹：onClick={() => this.doSomething()}。

• 箭头函数方法doSomething=()=>{ ... }：
  这是类字段语法（现在已经被主流浏览器和打包工具广泛支持），箭头函数本身没有自己的this，它会捕获定义时所在上下文的this——也就是类的实例对象。所以不管你怎么调用这个方法，this都稳稳指向组件实例，不用手动绑定，直接传给onClick也完全没问题。

2. 函数的挂载位置不同 #

• 普通方法会被挂载到类的原型链上，所有类实例共享这一个函数拷贝，节省内存。
• 箭头函数方法作为类字段，是直接挂载在每个实例对象上的，每个实例都会有一份独立的函数拷贝。不过在大多数业务场景下，这点内存差异可以忽略不计。

3. 其他小差异 #

• 普通方法可以被重写或者在原型上扩展，比如MyComponent.prototype.doSomething = ...；而箭头函数方法是实例的自有属性，没法通过原型修改。
• 箭头函数不能用作构造函数，不过在类组件里我们本来也不会用方法去实例化对象，所以这个点基本不影响日常开发。

举个直观的例子 #

class MyButton extends React.Component {
  // 普通方法
  handleNormalClick() {
    console.log("普通方法的this:", this);
  }

  // 箭头函数方法
  handleArrowClick = () => {
    console.log("箭头函数方法的this:", this);
  }

  constructor(props) {
    super(props);
    // 普通方法必须手动绑定this才能正常用
    this.handleNormalClick = this.handleNormalClick.bind(this);
  }

  render() {
    return (
      <div>
        <button onClick={this.handleNormalClick}>普通方法（已绑定）</button>
        <button onClick={this.handleArrowClick}>箭头函数方法</button>
        {/* 如果没绑定，直接传普通方法会打印undefined */}
        <button onClick={this.handleNormalClick.bind(this)}>临时绑定普通方法</button>
      </div>
    );
  }
}

总的来说，如果你是React新手，箭头函数方法用起来更省心，不用纠结this的绑定问题；如果你更倾向于遵循ES6类的标准写法，那普通方法加上手动绑定也完全没问题。

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