React函数无需传参即可识别事件？其机制及概念名称是什么？

核心概念名称 #

这种机制本质是React事件系统的自动参数注入，当你把事件处理函数直接绑定到JSX的事件属性上时，React会在事件触发时自动将合成事件（Synthetic Event）对象作为第一个参数传递给该函数。

实现原理 #

React并没有直接使用原生DOM事件，而是封装了一套自己的合成事件系统：

• 当你在JSX中写<input onChange={handleChange}/>时，React会在底层通过事件委托的方式，在根节点注册原生事件监听；
• 当真实DOM触发事件时，React会捕获这个原生事件，将其包装成合成事件对象（兼容不同浏览器的事件行为，提供统一的API）；
• 最后React会调用你绑定的handleChange函数，并自动把这个合成事件对象作为参数传入，所以你在函数里直接声明event参数就能拿到它。

关于箭头函数包裹的区别 #

你提到的{(e)=>handleChange(e)}其实是手动套了一层箭头函数，本质上是React先把合成事件传给箭头函数的e参数，再由箭头函数传递给handleChange。直接传handleChange的话，React会直接把合成事件作为参数传给它，两者效果一致，但直接绑定函数的写法更简洁，也能避免不必要的函数重新创建（在性能敏感场景更友好）。

深入学习的搜索关键词 #

如果想深挖这块内容，可以搜以下关键词：

• React 合成事件（Synthetic Event）
• React 事件委托机制
• React 事件系统底层实现
• React 回调函数参数注入

你提供的代码示例 #

<input onChange={handleChange}/>

const handleChange = (event) => { console.log(event.target.value); }

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