What are synthetic event in React?

在React中，合成事件（SyntheticEvent）是对浏览器原生事件的封装，主要的目的是为了在不同浏览器之间保持事件的一致性，解决了浏览器之间的兼容性问题。React的合成事件系统确保了你在组件中绑定的事件处理函数在所有浏览器中都能以相同的方式运行。

合成事件提供了与浏览器原生事件相同的接口，包括阻止默认行为（preventDefault）、停止事件传播（stopPropagation）等，但它是跨浏览器的。React内部实现了一套自己的事件委托机制，所有的事件都被绑定到了组件的最顶层，这样做可以减少真实DOM的事件处理器数量，提高性能。

例如，如果你在一个列表中的每一个项目上绑定点击事件，React并不会在每个项目上直接绑定事件处理器，而是在列表的最顶层绑定一个事件处理器，然后根据事件的目标元素和冒泡机制来确定触发的具体项目，这称为事件委托。

让我们看一个具体的例子：

jsx
function App() {
  function handleClick(event) {
    event.preventDefault();
    console.log('被点击的元素:', event.target);
    console.log('事件类型:', event.type);
  }

  return (
    <div>
      <button onClick={handleClick}>点击我</button>
    </div>
  );
}

在这个例子中，我们定义了一个handleClick函数，它将在按钮被点击时执行。这里我们使用了event.preventDefault()来阻止按钮的默认行为（例如提交表单），同时输出了被点击的元素和事件类型。尽管这里的event是一个合成事件，但你可以像处理原生事件一样使用它。

总之，React中的合成事件不仅提高了跨浏览器的一致性，同时也通过事件委托机制增加了应用的性能。