什么是React的合成事件？

在React里写onClick、onChange这些事件处理的时候，你有没有想过，它跟直接在HTML里写onclick是不是一回事？其实不是。React自己搞了一套事件系统，叫“合成事件”。它把浏览器的原生事件包装了一下，让你用起来更方便、更一致。

为什么要多此一举？

主要为了两件事：跨浏览器兼容和性能优化。

早年间，处理浏览器事件是个苦差事。IE有自己的一套，Chrome又是另一套。React的合成事件帮你把这些差异都抹平了。你写的onClick无论在哪个浏览器里，行为都一样，不用再写一堆if-else去判断event.target了。

性能上，React用了“事件委托”。它不是在每个按钮、每个输入框上直接绑定事件，而是在最外层的容器（比如#root）上绑一个统一的监听器。当事件冒泡上来，React再根据内部的映射关系，找到对应的组件，并调用你的事件处理函数。

// 你写的
function Button() {
  const handleClick = (e) => {
    console.log(e.nativeEvent); // 这是真正的原生事件
  };
  return <button onClick={handleClick}>点我</button>;
}
// React在背后大致做了：document.addEventListener('click', dispatchEvent);

这样一来，页面里有多少个可交互元素，都只占用一个事件监听，内存占用就少多了。

合成事件怎么用？

用起来跟原生事件很像，但有些细节要注意。事件对象e是合成过的，它兼容了所有浏览器的API。如果你真需要底层原生事件，可以通过e.nativeEvent拿到。

const handleChange = (e) => {
  console.log(e.target.value); // 正常工作，即使底层浏览器API不同
};

另一个重要特性是，合成事件会被自动回收。这意味着你不能异步地去访问事件对象。下面这种写法会出问题：

const handleClick = (e) => {
  setTimeout(() => {
    console.log(e.target); // 这里 e 的属性可能已经被清空了
  }, 1000);
};

如果非要异步用，得先调用e.persist()告诉React：“别急着回收，我待会儿还要用。”不过，这种情况最好是把需要的数据先存到状态或变量里。

所以，React的合成事件不是魔法，而是一个精心设计的抽象层。它让你不用操心浏览器战争留下的烂摊子，也通过智能的委托机制提升了性能。你几乎感觉不到它的存在，这正是它设计成功的地方——你只需要关心业务逻辑，脏活累活它替你干了。