React事件处理函数三种调用写法的正确性及原理解析

你在React学习过程中定义的事件处理方法如下：

const test = (e) => {
 e.stopPropagation();
}

以下针对JSX事件属性（如onClick）场景下的三种写法，分别说明正误和原因：

• 写法1：onClick={(e) => test(e)}
  正确写法。这种写法是给事件属性绑定了一个匿名箭头函数，当用户触发对应事件时，React会自动将合成事件对象e作为入参传入这个匿名函数，再由内部逻辑把事件对象传递给test方法执行，e.stopPropagation()可以正常拿到事件对象完成阻止冒泡的逻辑。如果需要给处理函数传入事件对象之外的自定义参数，这种写法是通用方案。
• 写法2：onClick={test}
  正确写法。这种写法是直接把test函数的引用传递给事件属性，没有额外包裹匿名函数。事件触发时React会自动把合成事件对象e作为入参传给test，执行效果和第一种写法完全一致，代码更简洁，同时避免了渲染时生成额外匿名函数的性能开销。如果不需要传入自定义参数，优先选择这种写法。
• 写法3：onClick={test(e)}
  错误写法。这种写法是在组件渲染阶段就直接执行了test(e)，而非将函数引用传给事件属性：一方面组件渲染时没有触发对应交互事件，根本拿不到事件对象e，会直接抛出引用错误；另一方面test没有返回值，最终绑定给事件属性的是undefined，后续用户真正触发交互时，不会执行任何事件处理逻辑，完全不符合预期。

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