五一前帮一个同学做模拟面试的时候，聊到了 React 的合成事件和 JavaScript 原生事件的差异性问题。我发现很多 React 技术栈的同学对这一方面好像理解的并不清楚，所以今天咱们这篇文章主要就来说下这个问题。2md28资讯网——每日最新资讯28at.com

2md28资讯网——每日最新资讯28at.com

1.设计理念

React合成事件 封装 了原生浏览器事件，提供了统一的API接口，使得开发者无论浏览器环境如何都可以用相同的方式处理事件。这种方法的主要目的是：确保跨浏览器的一致性并与 React 的声明式编程模型和生命周期集成。2md28资讯网——每日最新资讯28at.com

JavaScript 中的事件处理程序 由浏览器直接提供，与特定的浏览器行为密切相关。不同的浏览器可能有不同的实现和支持级别。2md28资讯网——每日最新资讯28at.com

2.浏览器兼容性

React 合成事件处理所有浏览器兼容性问题，为开发人员提供一个干净、一致的事件处理接口。2md28资讯网——每日最新资讯28at.com

例如：它标准化了不同浏览器之间的事件行为，以事件冒泡和默认行为为例，咱们来看下它的实现：2md28资讯网——每日最新资讯28at.com

// 构造器定义，接收事件配置、目标实例、本地事件和事件目标作为参数function SyntheticEvent(dispatchConfig, targetInst, nativeEvent, nativeEventTarget) {  this.dispatchConfig = dispatchConfig; // 存储事件的配置信息，例如事件类型  this._targetInst = targetInst; //存储触发事件的组件实例  this.nativeEvent = nativeEvent; // 存储本机浏览器事件对象  this.target = nativeEventTarget; // 存储事件的原生目标，即事件最初发生的多姆元素  this.currentTarget = null; // 处理事件的当前多姆元素将在事件处理期间设置}// SyneticEvents的原型对象，定义所有实例共享的方法SyntheticEvent.prototype = {  // Method to prevent the default event behavior  preventDefault: function() {    this.defaultPrevented = true; // 标志着事件的默认行为已被阻止    const event = this.nativeEvent; // 获取本地事件对象    if (!event) {      return; // 如果没有本地事件对象，则直接返回    }    // 如果本机事件对象支持preventAlert方法，请调用它以防止默认行为    if (event.preventDefault) {      event.preventDefault();    } else if (typeof event.returnValue !== 'undefined') { // 与IE8及以下版本兼容      event.returnValue = false; // 在较旧的IE浏览器中，使用returnValue= true来防止默认行为    }  },    // 阻止事件进一步传播的方法  stopPropagation: function() {    const event = this.nativeEvent; // 获取本地事件对象    if (!event) {      return; // 如果没有本地事件对象，则直接返回    }    // 如果本机事件对象支持stopPropagation方法，请调用它来停止事件冒泡    if (event.stopPropagation) {      event.stopPropagation();    } else if (typeof event.cancelBubble !== 'undefined') { // 与IE8及以下版本兼容      event.cancelBubble = true; // 在较旧的IE浏览器中，使用cancelBubble=true来停止事件冒泡    }  },  // ...};

3.性能优化

React 合成事件使用 事件池 来提高性能，即：重（chong）用事件对象。2md28资讯网——每日最新资讯28at.com

这意味着：事件回调函数执行后，事件对象的所有属性都会被清除并回收以供重用，减少垃圾收集和内存使用的压力。2md28资讯网——每日最新资讯28at.com

// 事件对象重用和回收的核心逻辑SyntheticEvent.prototype.destructor = function() {  this.target = null;  this.currentTarget = null;  this.dispatchConfig = null;  this._targetInst = null;  this.nativeEvent = null;  this.isDefaultPrevented = false;  this.isPropagationStopped = false;  // 清除所有属性....};// Event poolvar eventPool = [];// 从池中检索事件对象的函数SyntheticEvent.getPooled = function(dispatchConfig, targetInst, nativeEvent, nativeEventTarget) {  if (eventPool.length) {    var instance = eventPool.pop();    SyntheticEvent.call(instance, dispatchConfig, targetInst, nativeEvent, nativeEventTarget);    return instance;  }  return new SyntheticEvent(dispatchConfig, targetInst, nativeEvent, nativeEventTarget);};// 将事件对象返回到池的函数SyntheticEvent.release = function(event) {  event.destructor();  eventPool.push(event);};

而 JavaScript 事件每次触发时都会创建一个新的事件对象，这可能会增加内存使用量和垃圾收集的频率，特别是当事件频繁触发时（例如：滚动 或 输入）。”2md28资讯网——每日最新资讯28at.com

4.使用模式

React 通过 JSX语法 允许我们直接在组件的元素上声明事件处理函数（合成事件）。2md28资讯网——每日最新资讯28at.com

React 会自动处理添加和删除事件监听器，确保组件安装时添加监听器，卸载时删除监听器，从而避免内存泄漏。2md28资讯网——每日最新资讯28at.com

export default function Button() {  function handleClick() {    console.log('click!');  }  return <button onClick={handleClick}>点我</button>;}

Javascript 事件需要手动调用 addEventListener 添加事件监听器，同样手动调用removeEventListener 删除事件监听器：2md28资讯网——每日最新资讯28at.com

document.addEventListener('DOMContentLoaded', function() {  const button = document.querySelector('button');  button.addEventListener('click', function() {    console.log('click');  });});

5.总结

所以，React 的合成事件是 React 提供了一种高度抽象和集成的事件处理方式，并且可以更好地处理浏览器兼容性以及优化（卸载事件）等问题。它最终依然会被解析成原生事件。2md28资讯网——每日最新资讯28at.com

而 JavaScript 原生事件就是浏览器所提供的标准 API，使用时需要更多的处理兼容性以及性能等边缘逻辑。2md28资讯网——每日最新资讯28at.com