React事件处理prop中this.clickHandler与函数调用形式的区别是什么

实际项目中常见的两种事件绑定写法分别是：

// 写法A：直接传递函数引用
<button onClick={this.clickHandler}></button>
// 写法B：箭头函数包裹的即时调用形式
<button onClick={() => this.clickHandler()}></button>

二者的差异主要体现在4个方面：

• 引用稳定性不同
  写法A传递的是this.clickHandler本身的固定引用，只要这个方法本身没有被重新赋值，组件每次重渲染时，传给onClick的引用地址都是完全一致的。React做props浅比较时会判定这个属性没有变化，不会触发不必要的更新。
  写法B的匿名箭头函数是在组件渲染时现场创建的，哪怕内部逻辑完全不变，每次重渲染生成的箭头函数都是全新的内存引用。如果按钮组件被React.memo包裹，这种引用变化会直接让memo的浅比较缓存失效，导致组件无意义的重复渲染。
• this指向逻辑不同
  写法A的场景下，如果没有提前通过类构造函数bind方法、或者把clickHandler定义为箭头函数类属性，事件触发时函数会失去组件实例的this绑定（React组件运行在严格模式下，此时this为undefined），执行时访问this.state/this.props就会直接抛出读取属性失败的错误。本质原因是传递出去的函数和组件实例脱钩了，React触发事件时是独立调用这个函数，不会自动帮你维护原来的this指向。
  写法B的场景下，匿名箭头函数本身没有自己的this，会捕获创建时所在的组件渲染作用域的this，内部执行this.clickHandler()时是通过组件实例调用对应方法，this天然指向组件实例，哪怕clickHandler本身没有提前绑定this，也能正常拿到组件的属性和状态。
• 传参灵活性不同
  写法B可以非常方便地在触发时传入自定义参数，不需要额外的绑定语法：比如需要拿到列表项ID时可以直接写onClick={() => this.clickHandler(item.id, e)}，原生事件对象e会作为最后一个参数自动透传。
  写法A如果要传自定义参数，要么需要提前用bind绑定参数（每次渲染同样会生成新的函数引用），要么需要在clickHandler内部做参数判断，灵活度更低。
• 实际性能影响不同
  不存在“写法B绝对性能差、完全不能用”的刻板结论：如果是普通的、本身就会跟随父组件重渲染的页面组件，每次渲染创建一两个匿名箭头函数的内存开销小到根本感知不到，完全没必要为了所谓的性能硬套写法A；但如果是放在被React.memo优化的深层纯展示组件里，写法B带来的引用变化会直接击穿memo的缓存，导致整条子组件树无意义的重复渲染，这种场景下才更推荐用引用稳定的写法A做优化。

新手最容易踩的坑：用写法A时忘了绑定this，是类组件开发时遇到“点击按钮控制台报错Cannot read properties of undefined”的最常见原因，很多刚接触的开发者会误以为是React本身的逻辑有问题。

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