React事件处理中柯里化箭头函数的event参数传递原理

关于转换猜测的结论 #

React不会做你描述的这种自动转换，这种转换是完全多余的，你的柯里化写法本身就已经符合React事件绑定的规则。

具体运行逻辑 #

我们可以拆成两个阶段看完整流程：

• 第一阶段：组件渲染时的JSX求值
  当React渲染这个button组件时，会先执行onClick后花括号内的代码：调用clickMe(someParameter)，这个调用的返回值就是你定义的内层箭头函数(event) => { event.preventDefault(); // Do something }，这个内层函数会被直接赋值给onClick属性。
• 第二阶段：点击事件触发时的调用
  React事件系统的规则是统一的：只要你给事件属性传入的是一个可执行函数，事件触发时，React就会把内部生成的合成事件对象作为唯一参数，传入这个函数。
  此时onClick上绑定的刚好就是接收event参数的内层函数，所以event会直接被传入内层函数，整个过程不需要React做任何额外的包装处理。

两种写法的关系 #

你给出的转换后写法<button onClick={(event) => clickMe(someParameter)(event)} />和原写法运行效果完全一致，但多了一层不必要的箭头函数包装。原写法的等价逻辑是：

// 渲染阶段预执行拿到事件处理函数
const innerClickHandler = clickMe(someParameter);
// 直接绑定处理函数
<button onClick={innerClickHandler} />

你写的转换版本相当于手动在外层多包了一层函数，运行结果没有区别，但性能上会多一次无意义的函数调用，React本身不会做这种多余的操作。

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