React组件中两种onClick事件处理写法：哪种更优？

先看两种写法的代码：

第一种写法：

<button onClick={handleChange}>Change Text</button>

第二种写法：

<button onClick={() => handleChange()}>Change Text</button>

结论是第一种写法更优，原因主要有这几点：

• 减少不必要的函数创建：第二种写法每次组件渲染时都会生成一个新的匿名箭头函数，而第一种直接复用已经定义好的handleChange函数引用。频繁生成新函数会额外占用内存，要是组件频繁渲染（比如列表里的大量子组件、状态频繁更新的组件），性能损耗会更明显。
• 适配React性能优化机制：React的memo、PureComponent这类优化工具，是通过对比props的浅变化来决定是否重渲染的。如果传给子组件的事件处理函数每次都是新创建的，会被判定为props变更，导致子组件无意义地重渲染。第一种写法的函数引用稳定，不会触发这种无效渲染。
• 代码更简洁易读：直接传函数引用的写法一目了然，能快速看出绑定的是哪个处理函数，可读性比嵌套箭头函数更高。

当然第二种写法也有用武之地：比如需要给处理函数传额外参数的时候，比如onClick={() => handleChange(itemId)}，这种场景下就得用箭头函数来包裹传参。但在不需要传参的场景里，优先选第一种写法。

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