React JSX中onClick={increase}与onClick={()=>{increase()}}的区别是什么

两种写法的核心差异在于函数传递逻辑、参数传递规则、性能表现三个维度：

1. onClick={increase} 写法 #

• 本质是直接把 increase 函数的引用传递给事件处理程序，事件触发时React会直接调用该函数
• 默认会将事件对象e作为第一个参数传入increase
• 无额外函数创建开销：组件重渲染时不会生成新的函数引用，不会导致经过React.memo优化的子组件发生不必要重渲染，性能更好
• 适用场景：不需要给increase传递自定义参数，仅需要使用默认事件对象的场景

2. onClick={() => { increase() }} 写法 #

• 本质是给事件处理程序传递了一个新创建的匿名函数，事件触发时先执行匿名函数，再在匿名函数内部调用increase
• 默认不会给increase传入事件对象，如果需要使用事件对象要手动传递：onClick={(e) => { increase(e) }}
• 支持自定义传参：可以直接在调用时传入自定义参数，例如onClick={() => { increase(userId) }}，这是该写法最常见的使用场景
• 有额外性能开销：每次组件重渲染都会生成新的匿名函数引用，如果该属性传递给了React.memo包裹的子组件，会导致子组件的缓存优化失效，触发不必要的重渲染
• 如果需要使用自定义传参同时优化性能，可以搭配useCallback缓存匿名函数，示例如下：

// 仅当依赖项userId、increase变化时才会生成新的函数引用
const handleIncrease = useCallback(() => {
  increase(userId)
}, [userId, increase])

// 事件绑定
<button onClick={handleIncrease}>增加</button>

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