React中onClick绑定普通函数与箭头函数的区别是什么？

直接拆解这两种写法的核心差异，分几个维度说明：

• 函数传递逻辑不同

  • <Button onClick={doSomething} title='OK' />：直接把doSomething函数的引用传给onClick事件。当按钮被点击时，React会直接调用这个引用指向的原函数。
  • <Button onClick={() => doSomething()} title='OK' />：每次组件渲染时都会创建一个新的匿名箭头函数，点击时先执行这个匿名函数，再在内部调用doSomething。

• 参数传递的灵活性差异

  • 如果doSomething不需要额外参数，第一种写法更简洁直接；但如果要传自定义参数（比如id、状态值），第一种写法直接写onClick={doSomething(id)}会导致组件一渲染就执行函数，而非点击时触发。这时候必须用第二种写法，通过匿名函数包裹来延迟执行并传递参数：onClick={() => doSomething(id)}。

• 性能与渲染影响不同

  • 第二种写法每次渲染都会生成新的函数实例，当组件是频繁更新的子组件时，这个新函数会被React判定为新的props引用，可能触发子组件不必要的重渲染，在列表渲染这类场景下影响更明显。
  • 第一种写法传递的是固定的函数引用，不会随组件渲染产生新的引用，性能更优。

• 类组件中的this指向差异

  • 在类组件里，若doSomething是类的实例方法，第一种写法必须提前绑定this（比如在构造器里用this.doSomething = this.doSomething.bind(this)，或者把方法定义成类箭头函数），否则调用时this会是undefined。
  • 第二种写法的匿名箭头函数会自动捕获当前组件实例的this，不需要额外绑定就能正确访问类的属性和方法。

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