浅谈React Event实现原理


Posted in Javascript onSeptember 20, 2018

React 元素的事件处理和 DOM元素的很相似。但是有一点语法上的不同:

  1. React事件绑定属性的命名采用驼峰式写法,而不是小写。
  2. 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法)

并且 React 自己内部实现了一个合成事件,使用 React 的时候通常你不需要使用 addEventListener 为一个已创建的 DOM 元素添加监听器。你仅仅需要在这个元素初始渲染的时候提供一个监听器。

我们看一下这是怎么实现的

React 事件机制分为 事件注册,和事件分发,两个部分

事件注册

// 事件绑定
function handleClick(e) {
  e.preventDefault();
  console.log('The link was clicked.');
}

 return (
  <a href="#" rel="external nofollow" onClick={handleClick}>
   Click me
  </a>
 );

上述代码中, onClick 作为一个 props 传入了一个 handleClick,在组件更新和挂载的时候,会对props处理, 事件绑定流程如下:

浅谈React Event实现原理

核心代码:

在 ReactDOMComponent.js 进行组件加载 (mountComponent)、更新 (updateComponent) 的时候,调用 _updateDOMProperties 方法对 props 进行处理:

ReactDOMComponent.js

_updateDOMProperties: function(lastProps, nextProps, transaction) {
...
if (registrationNameModules.hasOwnProperty(propKey)) {
    if (nextProp) {
     // 如果传入的是事件,去注册事件
     enqueuePutListener(this, propKey, nextProp, transaction);
    } else if (lastProp) {
     deleteListener(this, propKey);
    }
   } 
...
}

// 注册事件
function enqueuePutListener(inst, registrationName, listener, transaction) {
 var containerInfo = inst._nativeContainerInfo;
 var doc = containerInfo._ownerDocument;
  ...
  // 去doc上注册
 listenTo(registrationName, doc);
  // 事务结束之后 putListener
 transaction.getReactMountReady().enqueue(putListener, {
  inst: inst,
  registrationName: registrationName,
  listener: listener,
 });
}

看下绑定方法

ReactBrowserEventEmitter.js

listento

//registrationName:需要绑定的事件
//当前component所属的document,即事件需要绑定的位置
listenTo: function (registrationName, contentDocumentHandle) {
  var mountAt = contentDocumentHandle;
  //获取当前document上已经绑定的事件
  var isListening = getListeningForDocument(mountAt);
  ...
   if (...) {
   //冒泡处理 
   ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(...);
   } else if (...) {
    //捕捉处理
    ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent(...);
   }
   ...
 },

走到最后其实就是 doc.addEventLister(event, callback, false);

可以看出所有事件绑定在document上

所以事件触发的都是ReactEventListener的dispatchEvent方法

回调事件储存

listenerBank

react 维护了一个 listenerBank 的变量保存了所有的绑定事件的回调。

回到之前注册事件的方法

function enqueuePutListener(inst, registrationName, listener, transaction) {
 var containerInfo = inst._nativeContainerInfo;
 var doc = containerInfo._ownerDocument;
 if (!doc) {
  // Server rendering.
  return;
 }
 listenTo(registrationName, doc);
 transaction.getReactMountReady().enqueue(putListener, {
  inst: inst,
  registrationName: registrationName,
  listener: listener,
 });
}

当绑定完成以后会执行putListener。

var listenerBank = {};
var getDictionaryKey = function (inst) {
//inst为组建的实例化对象
//_rootNodeID为组件的唯一标识
 return '.' + inst._rootNodeID;
}
var EventPluginHub = {
//inst为组建的实例化对象
//registrationName为事件名称
//listner为我们写的回调函数,也就是列子中的this.autoFocus
 putListener: function (inst, registrationName, listener) {
  ...
  var key = getDictionaryKey(inst);
  var bankForRegistrationName = listenerBank[registrationName] || (listenerBank[registrationName] = {});
  bankForRegistrationName[key] = listener;
  ...
 }
}

EventPluginHub在每个React中只实例化一次。也就是说,项目组所有事件的回调都会储存在唯一的listenerBank中。

事件触发

注册事件流程图所示,所有的事件都是绑定在Document上。回调统一是ReactEventListener的dispatch方法。
由于冒泡机制,无论我们点击哪个DOM,最后都是由document响应(因为其他DOM根本没有事件监听)。也即是说都会触发 ReactEventListener.js 里的 dispatch方法。

我们先看一下事件触发的流程图:

浅谈React Event实现原理

dispatchEvent: function (topLevelType, nativeEvent) {
  if (!ReactEventListener._enabled) {
   return;
  }
  // 这里得到TopLevelCallbackBookKeeping的实例对象,本例中第一次触发dispatchEvent时
  // bookKeeping instanceof TopLevelCallbackBookKeeping
  // bookKeeping = TopLevelCallbackBookKeeping {topLevelType: "topClick", nativeEvent: "click", ancestors: Array(0)}
  var bookKeeping = TopLevelCallbackBookKeeping.getPooled(topLevelType, nativeEvent);
  try {
   // Event queue being processed in the same cycle allows
   // `preventDefault`.
   // 接着执行handleTopLevelImpl(bookKeeping)
   ReactUpdates.batchedUpdates(handleTopLevelImpl, bookKeeping);
  } finally {
   // 回收
   TopLevelCallbackBookKeeping.release(bookKeeping);
  }
 }

function handleTopLevelImpl(bookKeeping) {
 var nativeEventTarget = getEventTarget(bookKeeping.nativeEvent);
 // 获取当前事件的虚拟dom元素
 var targetInst = ReactDOMComponentTree.getClosestInstanceFromNode(nativeEventTarget);

 var ancestor = targetInst;
 do {
  bookKeeping.ancestors.push(ancestor);
  ancestor = ancestor && findParent(ancestor);
 } while (ancestor);

 for (var i = 0; i < bookKeeping.ancestors.length; i++) {
  targetInst = bookKeeping.ancestors[i];
  // 这里的_handleTopLevel 对应的就是ReactEventEmitterMixin.js里的handleTopLevel
  ReactEventListener._handleTopLevel(bookKeeping.topLevelType, targetInst, bookKeeping.nativeEvent, getEventTarget(bookKeeping.nativeEvent));
 }
}

// 这里的findParent曾经给我带来误导,我以为去找当前元素所有的父节点,但其实不是的,
// 我们知道一般情况下,我们的组件最后会被包裹在<div id='root'></div>的标签里
// 一般是没有组件再去嵌套它的,所以通常返回null
/**
 * Find the deepest React component completely containing the root of the
 * passed-in instance (for use when entire React trees are nested within each
 * other). If React trees are not nested, returns null.
 */
function findParent(inst) {
 while (inst._hostParent) {
  inst = inst._hostParent;
 }
 var rootNode = ReactDOMComponentTree.getNodeFromInstance(inst);
 var container = rootNode.parentNode;
 return ReactDOMComponentTree.getClosestInstanceFromNode(container);
}

我们看一下核心方法 _handleTopLevel

ReactEventEmitterMixin.js

//这就是核心的处理了
handleTopLevel: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) {
  //返回合成事件
  //这里进入了EventPluginHub,调用事件插件方法,返回合成事件,并执行队列里的dispatchListener
  var events = EventPluginHub.extractEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget);
  //执行合成事件
  runEventQueueInBatch(events);
 }
合成事件如何生成,请看上方事件触发的流程图

runEventQueuelnBatch(events)做了两件事

  1. 把 dispatchListener里面的事件排队push进 eventQueue
  2. 执行 EventPluginHub.processEventQueue(false);

执行的细节如下:

EventPluginHub.js

// 循环 eventQueue调用
 var executeDispatchesAndReleaseTopLevel = function (e) {
  return executeDispatchesAndRelease(e, false);
 };
 /* 从event._dispatchListener 取出 dispatchlistener,然后dispatch事件,
  * 循环_dispatchListeners,调用executeDispatch
  */
 var executeDispatchesAndRelease = function (event, simulated) {
   if (event) {
     // 在这里dispatch事件
    EventPluginUtils.executeDispatchesInOrder(event, simulated);
     // 释放事件
    if (!event.isPersistent()) {
     event.constructor.release(event);
    }
   }
 };

 enqueueEvents: function (events) {
  if (events) {
   eventQueue = accumulateInto(eventQueue, events);
  }
 },

 /**
  * Dispatches all synthetic events on the event queue.
  *
  * @internal
  */
 processEventQueue: function (simulated) {
  // Set `eventQueue` to null before processing it so that we can tell if more
  // events get enqueued while processing.
  var processingEventQueue = eventQueue;
  eventQueue = null;
  if (simulated) {
   forEachAccumulated(processingEventQueue, executeDispatchesAndReleaseSimulated);
  } else {
   forEachAccumulated(processingEventQueue, executeDispatchesAndReleaseTopLevel);
  }
  // This would be a good time to rethrow if any of the event fexers threw.
  ReactErrorUtils.rethrowCaughtError();
 },
/**
 * Standard/simple iteration through an event's collected dispatches.
 */
function executeDispatchesInOrder(event, simulated) {
 var dispatchListeners = event._dispatchListeners;
 var dispatchInstances = event._dispatchInstances;

 if (Array.isArray(dispatchListeners)) {
  for (var i = 0; i < dispatchListeners.length; i++) {
   // 由这里可以看出,合成事件的stopPropagation只能阻止react合成事件的冒泡,
   // 因为event._dispatchListeners 只记录了由jsx绑定的绑定的事件,对于原生绑定的是没有记录的
   if (event.isPropagationStopped()) {
    break;
   }
   // Listeners and Instances are two parallel arrays that are always in sync.
   executeDispatch(event, simulated, dispatchListeners[i], dispatchInstances[i]);
  }
 } else if (dispatchListeners) {
  executeDispatch(event, simulated, dispatchListeners, dispatchInstances);
 }
 event._dispatchListeners = null;
 event._dispatchInstances = null;
}
function executeDispatch(event, simulated, listener, inst) {
 var type = event.type || 'unknown-event';
 // 注意这里将事件对应的dom元素绑定到了currentTarget上
 event.currentTarget = EventPluginUtils.getNodeFromInstance(inst);
 if (simulated) {
  ReactErrorUtils.invokeGuardedCallbackWithCatch(type, listener, event);
 } else {
  // 一般都是非模拟的情况,执行invokeGuardedCallback
  ReactErrorUtils.invokeGuardedCallback(type, listener, event);
 }
 event.currentTarget = null;
}

由上面的函数可知,dispatch 合成事件分为两个步骤:

  1. 通过_dispatchListeners里得到所有绑定的回调函数,在通过_dispatchInstances的绑定回调函数的虚拟dom元素
  2. 循环执行_dispatchListeners里所有的回调函数,这里有一个特殊情况,也是react阻止冒泡的原理

其实在 EventPluginHub.js 里主要做了两件事情.

1.从event._dispatchListener 取出 dispatchlistener,然后dispatch事件,
循环_dispatchListeners,调用executeDispatch,然后走到ReactErrorUtils.invokeGuardedCallback;
2.释放 event

上面这个函数最重要的功能就是将事件对应的dom元素绑定到了currentTarget上,

这样我们通过e.currentTarget就可以找到绑定事件的原生dom元素。

下面就是整个执行过程的尾声了:

ReactErrorUtils.js

var fakeNode = document.createElement('react');
ReactErrorUtils.invokeGuardedCallback = function(name, func, a, b) {
   var boundFunc = func.bind(null, a, b);
   var evtType = `react-${name}`;
   fakeNode.addEventListener(evtType, boundFunc, false);
   var evt = document.createEvent('Event');
   evt.initEvent(evtType, false, false);
   fakeNode.dispatchEvent(evt);
   fakeNode.removeEventListener(evtType, boundFunc, false);
  };

由invokeGuardedCallback可知,最后react调用了faked元素的dispatchEvent方法来触发事件,并且触发完毕之后立即移除监听事件。

总的来说,整个click事件被分发的过程就是:

1、用EventPluginHub生成合成事件,这里注意同一事件类型只会生成一个合成事件,里面的_dispatchListeners里储存了同一事件类型的所有回调函数

2、按顺序去执行它

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
js中关于一个分号的崩溃示例
Nov 11 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
对vue 键盘回车事件的实例讲解
Aug 25 Javascript
前端路由&amp;webpack基础配置详解
Jun 10 Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 Javascript
JS函数基本定义与用法示例
Jan 15 Javascript
如何用Node.js编写内存效率高的应用程序
Apr 30 Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 #Javascript
Node批量爬取头条视频并保存方法
Sep 20 #Javascript
vue 本地环境跨域请求proxyTable的方法
Sep 19 #Javascript
vue 优化CDN加速的方法示例
Sep 19 #Javascript
Vue前后端不同端口的实现方法
Sep 19 #Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 #Javascript
浅谈React之状态(State)
Sep 19 #Javascript
You might like
php 生成文字png图片的代码
2011/04/17 PHP
PHP缓存技术的使用说明
2011/08/06 PHP
PHP函数引用返回的实例详解
2016/09/11 PHP
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
Scala解析Json字符串的实例详解
2017/10/11 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
JavaScript交换变量的常用方法小结【4种方法】
2020/05/07 Javascript
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
跟老齐学Python之总结参数的传递
2014/10/10 Python
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
numpy排序与集合运算用法示例
2017/12/15 Python
python 实现矩阵填充0的例子
2019/11/29 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
python中操作文件的模块的方法总结
2021/02/04 Python
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
巴西最大的家电和百货零售商:Casas Bahia
2016/11/22 全球购物
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
共产党员公开承诺书
2014/03/25 职场文书
2014年技术员工作总结
2014/11/18 职场文书
先进党支部申报材料
2014/12/24 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
Mysql多层子查询示例代码(收藏夹案例)
2022/03/31 MySQL
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js