// 事件綁定function handleClick(e) {  e.preventDefault();  console.log('The link was clicked.');} return (  <a href="#" rel="external nofollow" onClick={handleClick}>   Click me  </a> );

_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, });}

//registrationName:需要綁定的事件//當前component所屬的document，即事件需要綁定的位置listenTo: function (registrationName, contentDocumentHandle) {  var mountAt = contentDocumentHandle;  //獲取當前document上已經綁定的事件  var isListening = getListeningForDocument(mountAt);  ...   if (...) {   //冒泡處理    ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(...);   } else if (...) {    //捕捉處理    ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent(...);   }   ... },

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, });}

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;  ... }}

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: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) {  //返回合成事件  //這里進入了EventPluginHub，調用事件插件方法，返回合成事件，并執行隊列里的dispatchListener  var events = EventPluginHub.extractEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget);  //執行合成事件  runEventQueueInBatch(events); }

 // 循環 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;}

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);  };