五一前幫一個同學做模擬面試的時候，聊到了 React 的合成事件和 JavaScript 原生事件的差異性問題。我發現很多 React 技術棧的同學對這一方面好像理解的并不清楚，所以今天咱們這篇文章主要就來說下這個問題。ac828資訊網——每日最新資訊28at.com

ac828資訊網——每日最新資訊28at.com

1.設計理念

React合成事件 封裝 了原生瀏覽器事件，提供了統一的API接口，使得開發者無論瀏覽器環境如何都可以用相同的方式處理事件。這種方法的主要目的是：確保跨瀏覽器的一致性并與 React 的聲明式編程模型和生命周期集成。ac828資訊網——每日最新資訊28at.com

JavaScript 中的事件處理程序 由瀏覽器直接提供，與特定的瀏覽器行為密切相關。不同的瀏覽器可能有不同的實現和支持級別。ac828資訊網——每日最新資訊28at.com

2.瀏覽器兼容性

React 合成事件處理所有瀏覽器兼容性問題，為開發人員提供一個干凈、一致的事件處理接口。ac828資訊網——每日最新資訊28at.com

例如：它標準化了不同瀏覽器之間的事件行為，以事件冒泡和默認行為為例，咱們來看下它的實現：ac828資訊網——每日最新資訊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）用事件對象。ac828資訊網——每日最新資訊28at.com

這意味著：事件回調函數執行后，事件對象的所有屬性都會被清除并回收以供重用，減少垃圾收集和內存使用的壓力。ac828資訊網——每日最新資訊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 事件每次觸發時都會創建一個新的事件對象，這可能會增加內存使用量和垃圾收集的頻率，特別是當事件頻繁觸發時（例如：滾動 或 輸入）。”ac828資訊網——每日最新資訊28at.com

4.使用模式

React 通過 JSX語法 允許我們直接在組件的元素上聲明事件處理函數（合成事件）。ac828資訊網——每日最新資訊28at.com

React 會自動處理添加和刪除事件監聽器，確保組件安裝時添加監聽器，卸載時刪除監聽器，從而避免內存泄漏。ac828資訊網——每日最新資訊28at.com

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

Javascript 事件需要手動調用 addEventListener 添加事件監聽器，同樣手動調用removeEventListener 刪除事件監聽器：ac828資訊網——每日最新資訊28at.com

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

5.總結

所以，React 的合成事件是 React 提供了一種高度抽象和集成的事件處理方式，并且可以更好地處理瀏覽器兼容性以及優化（卸載事件）等問題。它最終依然會被解析成原生事件。ac828資訊網——每日最新資訊28at.com

而 JavaScript 原生事件就是瀏覽器所提供的標準 API，使用時需要更多的處理兼容性以及性能等邊緣邏輯。ac828資訊網——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-86998-0.htmlReact 合成事件和 JavaScript 事件有什么區別？

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 如何用C++實現簡單的內存池

下一篇： Python 編程速查：迅速理解 next() 函數