什么是合成事件，与原生事件有什么区别？

---

合成事件（SyntheticEvent）是React中用于处理浏览器原生事件的封装对象。React通过合成事件提供了一个跨浏览器的、一致性的事件系统，以便在不同浏览器中保持一致的行为。

合成事件的特点：

1. 跨浏览器： 合成事件是React对浏览器原生事件的封装，使得你不必担心不同浏览器之间的事件差异。
2. 性能优化： React 通过事件委托的方式处理事件，将事件处理逻辑统一放到 document 上，减少了事件处理函数的数量，提高了性能。
3. 池化： 合成事件是通过事件池机制实现的，即事件对象在触发后会被重置，可以在处理完事件后被复用，减少了垃圾回收的压力。
4. 属性传递： 合成事件对象提供了一些属性和方法，例如stopPropagation、preventDefault等，用于控制事件的传播和默认行为。

区别：

1. 属性的命名： 合成事件对象的属性和方法命名与原生事件略有不同，例如，原生事件的onclick在合成事件中是onClick。
2. 事件委托： React 使用了事件委托的机制，将事件处理逻辑统一放到 document 上，而不是在每个元素上添加事件处理函数。这有助于性能的提升。
3. 跨浏览器： 合成事件通过React的封装，解决了不同浏览器之间的事件差异。

示例：

function handleClick(e) {
  e.preventDefault(); // 合成事件的方法
  console.log('Clicked!');
}

// React 组件中的事件处理
<button onClick={handleClick}>Click me</button>

总体而言，合成事件是React在原生事件基础上提供的一层封装，旨在提供更一致、跨浏览器的事件处理体验，同时通过性能优化来改善事件处理的效率。

---

原文链接：codingdict.net

---