React事件处理中箭头函数与普通函数的差异及普通函数使用问题

认知纠正 #

你对两种函数的等价认知是错误的，二者核心差异为this的绑定逻辑不同：

• 箭头函数不存在独立的this，内部this继承自定义位置的外层作用域的this。在React类组件的render方法内定义箭头函数时，外层this指向当前组件实例，因此可以正常访问到实例上的handleClick方法。
• 普通函数的this由运行时的调用方式决定，React触发onClick回调时默认没有绑定上下文，因此你写的普通函数内部this在非严格模式下指向全局window对象，严格模式下为undefined，自然无法找到this.handleClick方法，导致运行失败。

普通函数完全可以用于处理React点击事件，只需要提前绑定正确的this即可，常见方案如下： #

• 传递回调时直接用bind绑定组件实例的this

<input type="submit" onClick={function callHandleClick(){return this.handleClick()}.bind(this)}/>

• 在类组件构造函数中提前绑定方法的this，后续直接传递方法引用即可，避免每次render重复生成新函数

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    // 提前绑定this到组件实例
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // 自定义逻辑
  }

  render() {
    return <input type="submit" onClick={this.handleClick}/>
  }
}

• 如果你使用的是React函数组件，本身不存在类组件的this指向问题，直接定义普通函数作为回调即可正常运行。

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