mountComponent: function(rootID, transaction, context) {
  // 这里只取关键部分分析
    this._rootNodeID = rootID;

    var props = this._currentElement.props;
    var mountImage;
    if (transaction.useCreateElement) {
    } else {
      // 创建每个元素的开始标签和解析元素上的props，如 style、事件、等
      var tagOpen = this._createOpenTagMarkupAndPutListeners(transaction, props);
      // 子标签作为 content 解析，会进入到mountChildren，mountChildren作用如mountComponent 同样会解析标签上的一些属性
      var tagContent = this._createContentMarkup(transaction, props, context);
      if (!tagContent && omittedCloseTags[this._tag]) {
        mountImage = tagOpen + '/>';
      } else {
        mountImage =
          tagOpen + '>' + tagContent + '</' + this._currentElement.type + '>';
      }
    }
    return mountImage;
},

_createOpenTagMarkupAndPutListeners: function(transaction, props) {
  var ret = '<' + this._currentElement.type;
  // 这里的 props 包含标签上所有可以定义的属性，只分析事件
  for (var propKey in props) {
    // registrationNameModules 这是加载 react 应用时，注册到 react EventPluginHub这个事件插件中心所有 react 支持的事件类型
    if (registrationNameModules.hasOwnProperty(propKey)) {
      if (propValue) {
        enqueuePutListener(this._rootNodeID, propKey, propValue, transaction);
      }
    }
  }

function enqueuePutListener(id, registrationName, listener, transaction) {
  var container = ReactMount.findReactContainerForID(id);
  if (container) {
    // 确保元素类型是节点类型,并且取到 document 节点
    var doc = container.nodeType === ELEMENT_NODE_TYPE ?
      container.ownerDocument :
      container;
    // 在 document 对象上完成事件的绑定
    listenTo(registrationName, doc);
  }
  // 该方法会在jsx中每一个嵌套的dom标签渲染完毕（依次往上递归）会去调用
  transaction.getReactMountReady().enqueue(putListener, {
    id: id,
    registrationName: registrationName,
    listener: listener,
  });
}

listenTo: function(registrationName, contentDocumentHandle) {
  var mountAt = contentDocumentHandle;
  var isListening = getListeningForDocument(mountAt);
  var dependencies =
    EventPluginRegistry.registrationNameDependencies[registrationName];

  var topLevelTypes = EventConstants.topLevelTypes;
  for (var i = 0; i < dependencies.length; i++) {
    var dependency = dependencies[i];
    // 以下分支只看最后一个，上面的几个都是特殊处理过的，如兼容性什么的
    if (!(
          isListening.hasOwnProperty(dependency) &&
          isListening[dependency]
        )) {
      if (dependency === topLevelTypes.topWheel) {
      } else if (dependency === topLevelTypes.topScroll) {
      } else if (dependency === topLevelTypes.topFocus ||
          dependency === topLevelTypes.topBlur) {
      } else if (topEventMapping.hasOwnProperty(dependency)) {
        ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(
          dependency,
          topEventMapping[dependency],
          mountAt
        );
      }
      isListening[dependency] = true;
    }
  }
},

trapBubbledEvent: function (topLevelType, handlerBaseName, element) {
  if (!element) {
    return null;
  }
  return EventListener.listen(
    element,   // 绑定到的DOM目标,也就是document
    handlerBaseName,   // eventType
    ReactEventListener.dispatchEvent.bind(null, topLevelType));  // document上的原生事件触发后回调
},

listen: function listen(target, eventType, callback) {
  if (target.addEventListener) {
    // 将原生事件添加到target这个dom上,也就是document上。
    target.addEventListener(eventType, callback, false);
    return {
      // 删除事件,这个由React自己回调,不需要调用者来销毁。但仅仅对于React合成事件才行
      remove: function remove() {
        target.removeEventListener(eventType, callback, false);
      }
    };
  } else if (target.attachEvent) {
    // attach和detach的方式
    target.attachEvent('on' + eventType, callback);
    return {
      remove: function remove() {
        target.detachEvent('on' + eventType, callback);
      }
    };
  }
},

putListener: function(id, registrationName, listener) {
  // eg: listenerBank['onclick'][nodeId]
    var bankForRegistrationName =
      listenerBank[registrationName] || (listenerBank[registrationName] = {});
    bankForRegistrationName[id] = listener;
  },

var MouseEventInterface = {
  screenX: null,
  screenY: null,
  clientX: null,
  clientY: null,
  ctrlKey: null,
  shiftKey: null,
  altKey: null,
  metaKey: null,
  getModifierState: getEventModifierState,
  button: function(event) {
    // 一些兼容性的处理
  },
  buttons: null,
  relatedTarget: function(event) {
  //  同上
  },
  // "Proprietary" Interface.
  pageX: function(event) {
  },
  pageY: function(event) {
  },
};

var EventInterface = {
  type: null,
  currentTarget: emptyFunction.thatReturnsNull,
  eventPhase: null,
  bubbles: null,
  cancelable: null,
  timeStamp: function(event) {
    return event.timeStamp || Date.now();
  },
  defaultPrevented: null,
  isTrusted: null,
};

assign(SyntheticEvent.prototype, {

  preventDefault: function() {
    this.defaultPrevented = true;
    var event = this.nativeEvent;
    if (!event) {
      return;
    }
    if (event.preventDefault) {
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
    // 注意这个方法，这是才是 react 提供出来阻止默认事件的方法，以上为了在具体的触发元素上同步信息
    this.isDefaultPrevented = emptyFunction.thatReturnsTrue;
  },

  stopPropagation: function() {
    var event = this.nativeEvent;
    if (!event) {
      return;
    }
    if (event.stopPropagation) {
      event.stopPropagation();
    } else {
      event.cancelBubble = true;
    }
    // 注意这个方法，这是才是 react 提供出来阻止冒泡的方法，以上为了在具体的触发元素上同步信息
    this.isPropagationStopped = emptyFunction.thatReturnsTrue;
  },
  persist: function() {
    this.isPersistent = emptyFunction.thatReturnsTrue;
  },
  isPersistent: emptyFunction.thatReturnsFalse,
  destructor: function() {
    var Interface = this.constructor.Interface;
    for (var propName in Interface) {
      this[propName] = null;
    }
    this.dispatchConfig = null;
    this.dispatchMarker = null;
    this.nativeEvent = null;
  },

});

// topLevelType：讲相关的事件名称转为 top 开头的，如topClick。前面讲到过的
// nativeEvent: 用户触发click等事件时，浏览器传递的原生事件
dispatchEvent: function (topLevelType, nativeEvent) {
    // 静态池、批处理的为了提高性能的不说了
    var bookKeeping = TopLevelCallbackBookKeeping.getPooled(topLevelType, nativeEvent);
    try {
      // 放入批处理队列中,React事件流也是一个消息队列的方式
      ReactUpdates.batchedUpdates(handleTopLevelImpl, bookKeeping);
    } finally {
      TopLevelCallbackBookKeeping.release(bookKeeping);
    }
}
handleTopLevel: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) {
    // 采用对象池的方式构造出合成事件。不同的eventType的合成事件不同
    var events = EventPluginHub.extractEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget);
    // 批处理队列中的events
    runEventQueueInBatch(events);
  }

extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) {
    var events;
    // EventPluginHub可以存储React合成事件的callback,也存储了一些plugin,这些plugin在EventPluginHub初始化时就注册就来了
    var plugins = EventPluginRegistry.plugins;
    for (var i = 0; i < plugins.length; i++) {
      var possiblePlugin = plugins[i];
      if (possiblePlugin) {
        // 根据eventType构造不同的合成事件SyntheticEvent，  如SimpleEventPlugin
        var extractedEvents = possiblePlugin.extractEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget);
        if (extractedEvents) {
          // 将构造好的合成事件extractedEvents添加到events数组中,这样就保存了所有plugin构造的合成事件
          events = accumulateInto(events, extractedEvents);
        }
      }
    }
    return events;
  },

function accumulateTwoPhaseDispatchesSkipTarget(events) {
  // 对合成的 events 分别执行 accumulateTwoPhaseDispatchesSingleSkipTarget
  forEachAccumulated(events, accumulateTwoPhaseDispatchesSingleSkipTarget);
}
// traverseTwoPhaseSkipTarget 会在遍历 dom 的结构中依次调用accumulateDirectionalDispatches
function accumulateTwoPhaseDispatchesSingleSkipTarget(event) {
  if (event && event.dispatchConfig.phasedRegistrationNames) {
    EventPluginHub.injection.getInstanceHandle().traverseTwoPhaseSkipTarget(
      event.dispatchMarker,
      accumulateDirectionalDispatches,
      event
    );
  }
}
// domID,正在遍历的 dom，upwards向上还是向下，模拟捕获和冒泡的顺序，event复合事件对象
function accumulateDirectionalDispatches(domID, upwards, event) {
  var phase = upwards ? PropagationPhases.bubbled : PropagationPhases.captured;
  var listener = listenerAtPhase(domID, event, phase);
  if (listener) {
    event._dispatchListeners =
      accumulateInto(event._dispatchListeners, listener);
    event._dispatchIDs = accumulateInto(event._dispatchIDs, domID);
  }
}
// 先向下，再向上
traverseTwoPhaseSkipTarget: function(targetID, cb, arg) {
    if (targetID) {
      traverseParentPath('', targetID, cb, arg, true, true);
      traverseParentPath(targetID, '', cb, arg, true, true);
    }
  },
function traverseParentPath(start, stop, cb, arg, skipFirst, skipLast) {
  start = start || '';
  stop = stop || '';
  var traverseUp = isAncestorIDOf(stop, start);
  // Traverse from `start` to `stop` one depth at a time.
  var depth = 0;
  var traverse = traverseUp ? getParentID : getNextDescendantID;
  for (var id = start; /* until break */; id = traverse(id, stop)) {
    var ret;
    if ((!skipFirst || id !== start) && (!skipLast || id !== stop)) {
      ret = cb(id, traverseUp, arg);
    }
    if (ret === false || id === stop) {
      // Only break //after// visiting `stop`.
      break;
    }
  }
}

function executeDispatchesInOrder(event, simulated) {
  var dispatchListeners = event._dispatchListeners;
  var dispatchIDs = event._dispatchIDs;
  if (Array.isArray(dispatchListeners)) {
    for (var i = 0; i < dispatchListeners.length; i++) {
      if (event.isPropagationStopped()) {
        break;
      }
      // Listeners and IDs are two parallel arrays that are always in sync.
      executeDispatch(event, simulated, dispatchListeners[i], dispatchIDs[i]);
    }
  } else if (dispatchListeners) {
    executeDispatch(event, simulated, dispatchListeners, dispatchIDs);
  }
  event._dispatchListeners = null;
  event._dispatchIDs = null;
}

Overview of React and the event system:
*
* +------------+    .
* |    DOM     |    .
* +------------+    .
*       |           .
*       v           .
* +------------+    .
* | ReactEvent |    .
* |  Listener  |    .
* +------------+    .                         +-----------+
*       |           .               +--------+|SimpleEvent|
*       |           .               |         |Plugin     |
* +-----|------+    .               v         +-----------+
* |     |      |    .    +--------------+                    +------------+
* |     +-----------.--->|EventPluginHub|                    |    Event   |
* |            |    .    |              |     +-----------+  | Propagators|
* | ReactEvent |    .    |              |     |TapEvent   |  |------------|
* |  Emitter   |    .    |              |<---+|Plugin     |  |other plugin|
* |            |    .    |              |     +-----------+  |  utilities |
* |     +-----------.--->|              |                    +------------+
* |     |      |    .    +--------------+
* +-----|------+    .                ^        +-----------+
*       |           .                |        |Enter/Leave|
*       +           .                +-------+|Plugin     |
* +-------------+   .                         +-----------+
* | application |   .
* |-------------|   .
* |             |   .
* |             |   .
* +-------------+   .
*                   .
*    React Core     .  General Purpose Event Plugin System
*/

import React, { Component } from 'react';

const testable = (target) => {
    target.title = '使用了修饰器';
}

class ListDemo extends Component {
    render() {
        let title = ListDemo.title || '未使用修饰器';
        return (
            <div>{title}</div>
        )
    }
}

export default ListDemo;

var testable = function testable(target) {
    target.title = '使用了修饰器';
};

var ListDemo = function (_Component) {
    (0, _inherits3.default)(ListDemo, _Component);

    function ListDemo() {
        (0, _classCallCheck3.default)(this, ListDemo);
        return (0, _possibleConstructorReturn3.default)(this, (ListDemo.__proto__ || (0, _getPrototypeOf2.default)(ListDemo)).apply(this, arguments));
    }

    (0, _createClass3.default)(ListDemo, [{
        key: 'render',
        value: function render() {
            var title = ListDemo.title || '未使用修饰器';
            return _react2.default.createElement(
                'div',
                null,
                title
            );
        }
    }]);
    return ListDemo;
}(_react.Component);

exports.default = ListDemo;

import React, { Component } from 'react';

const testable = (target) => {
    target.title = '使用了修饰器';
}

@testable
class ListDemo extends Component {
    render() {
        let title = ListDemo.title || '未使用修饰器';
        return (
            <div>{title}</div>
        )
    }
}

export default ListDemo;

var testable = function testable(target) {
    target.title = '使用了修饰器';
};

var ListDemo = testable(_class = function (_Component) {
    (0, _inherits3.default)(ListDemo, _Component);

    function ListDemo() {
        (0, _classCallCheck3.default)(this, ListDemo);
        return (0, _possibleConstructorReturn3.default)(this, (ListDemo.__proto__ || (0, _getPrototypeOf2.default)(ListDemo)).apply(this, arguments));
    }

    (0, _createClass3.default)(ListDemo, [{
        key: 'render',
        value: function render() {
            var title = ListDemo.title || '未使用修饰器';
            return _react2.default.createElement(
                'div',
                null,
                title
            );
        }
    }]);
    return ListDemo;
}(_react.Component)) || _class;

exports.default = ListDemo;

import React, { Component } from 'react';

const testable = (target) => {
    target.title = '使用了修饰器';
}

class ListDemo extends Component {
    render() {
        let title = ListDemo.title || '未使用修饰器';
        return (
            <div>{title}</div>
        )
    }
}

export default testable(ListDemo) || ListDemo;

@decorator
class A {}

// 等同于

class A {}
A = decorator(A) || A;

import React, { Component } from 'react';

const testable = (title) => (target) => {
    target.title = title;
}

@testable('使用了修饰器')
class ListDemo extends Component {
    render() {
        let title = ListDemo.title || '未使用修饰器';
        return (
            <div>{title}</div>
        )
    }
}

export default ListDemo;

import React, { Component } from 'react';
import Refresh from './Refresh';
import More from './More';

/*
*   hasLoader: 加载更多功能
*   hasRefresh: 下拉刷新功能
*   pageSize: 每页数据条数
*/
const loadMore = (hasLoader, hasRefresh, pageSize = 10) => (ComposedComponent) => class LoadMore extends Component {
    componentDidMount() {

    }

    //todo:相关处理逻辑

    render() {
        if (!hasLoader && !hasRefresh) {
            return <ComposedComponent {...this.props} />;
        }
        
        return (
            <div>
                { hasRefresh && <Refresh /*...*/ />}
                <ComposedComponent {...this.props} />
                { hasLoader && <More /*...*/ />}
            </div>
        );
    }
};

@loadMore(true, true, 10)
class ListDemo extends Component {
    //...
}

export default ListDemo;

//定义一个组件
class Home extends React.Component {
    //....
}

//以往从状态树取出对应的数据，让后通过props传给组件使用通过react-redux自带的connect()方法
export default connect(state => ({todos: state.todos}))(Home);

//使用装饰器的话就变成这样，似乎简单了很多
@connect(state => ({ todos: state.todos }))
class Home extends React.Component {
    //....
}

//options: 
//  capture : Boolean
//  once    : Boolean
//  passive : Boolean
element.addEventListener(type, listener, options | useCapture)