为什么在 ReactJS 中使用合成事件？

ReactJS 提供了一种基于合成事件（SyntheticEvent）的事件系统来处理用户交互，与原生浏览器事件系统相比，合成事件存在以下优势：

跨浏览器兼容性

合成事件是在 ReactJS 对原生浏览器事件系统的封装，通过使用合成事件，ReactJS 可以提供一个跨浏览器兼容的事件系统。这意味着，无论在什么浏览器上运行你的代码，你都可以保证一致的事件处理逻辑。

性能

合成事件是基于事件委派（event delegation）实现的，这意味着 ReactJS 会将事件处理逻辑委托到组件树的根节点，并在组件树中查找被点击的组件。这种委派方式提供了更高效的事件处理机制，因为只会注册少量的事件监听器而不是将事件监听器添加到每个可点击元素上。

事件代理

在浏览器中，添加事件监听器通常是通过使用 addEventListener() 或类似的方法。这意味着你需要绑定事件处理函数到每个元素上，这会导致多个事件监听器的存在并且在彼此之间竞争。通过使用合成事件，ReactJS 可以管理事件监听器，并将其委托到组件树顶部的少量监听器上，从而避免了多个监听器的存在，并保证了不同组件中的事件不会相互干扰。

兼容性提升

合成事件可以自动处理跨浏览器的兼容性问题。ReactJS会将原始事件对象（NativeEvent）统一转换为合成事件对象。通过使用合成事件，ReactJS 可以自动为不同的浏览器提供兼容性支持，而无需你自己处理不同浏览器的事件问题。

示例代码

下面是一个使用合成事件的示例：

import React from 'react';

class Button extends React.Component {
  handleClick = (event) => {
    console.log('button clicked');
  }

  render() {
    return <button onClick={this.handleClick}>Click me!</button>;
  }
}

在此示例中，我们使用合成事件来处理点击事件。通过将 handleClick 方法作为事件处理器传递给 onClick 属性，ReactJS会自动创建一个合成事件对象，并将其作为参数传递给 handleClick 方法。在 handleClick 方法中，我们可以通过 event 参数来访问合成事件对象。