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

在 ReactJS 中，我们经常听到「合成事件」这个词。但是为什么我们在 ReactJS 中使用合成事件呢？

ReactJS 中的事件处理

ReactJS 中的事件处理与原生 JS 中的事件处理有些不同。在原生 JS 中，我们可以通过添加事件监听器来处理事件：

const btn = document.querySelector('button');
btn.addEventListener('click', () => {
  console.log('clicked');
});

而在 ReactJS 中，事件处理需要用到 JSX。比如：

function handleClick() {
  console.log('clicked');
}

function Button() {
  return <button onClick={handleClick}>Click Me</button>;
}

ReactJS 中的事件处理，就是通过在定制组件的 JSX 文件中添加监听函数来处理事件。

为什么要使用合成事件？

那么为什么我们需要在 ReactJS 中使用合成事件呢？

轻量级

在 ReactJS 中，每个元素上都会绑定很多事件。如果每个事件都使用原生浏览器事件监听方式来实现，那么就会给页面增添很多的事件监听器，导致页面变得十分沉重。

而合成事件采用了一种更为轻量级的方式处理事件。它把所有事件监听器放到了一个单独的结构中，并且采用了事件委托的方式来处理事件。这样就可以大大减少事件监听器的数量。这也是 ReactJS 能够实现高性能渲染的一个重要原因。

跨浏览器兼容性

不同的浏览器对事件的实现是有所不同的。而合成事件则是 ReactJS 为我们做的一件好事情，它能够将不同浏览器的行为做一个兼容，使我们在不同浏览器中都能够使用统一的方式来处理事件。

事件池机制

合成事件还采用了事件池机制。也就是说，在事件发生后，合成事件会将一个事件对象传递给事件回调函数，在事件回调函数执行完之后，该事件对象就会被重置，并重新放回事件池中供其它事件使用。这样可以减少新事件对象的创建和销毁，提高了性能。

结论

综上所述，我们在 ReactJS 中使用合成事件有三个好处：

1. 轻量级，可以大幅减少事件监听器的数量
2. 跨浏览器兼容性，可以让我们的代码在不同浏览器中都能够使用统一的方式来处理事件
3. 采用事件池机制，可以减少新事件对象的创建和销毁，提高了性能

因此，在 ReactJS 中使用合成事件是一种很好的选择。