React源码分析6 — React合成系统.docxVIP

React源码分析6 — React合成事件系统 本文章来自于阿里云云栖社区 摘要：?React源码系列文章，请多支持： [React源码分析1 — 组件和对象的创建（createClass，createElement)](/articles/72905) [React源码分析2 — React组件插入DOM流程](http://www. React源码系列文章，请多支持：React源码分析1 — 组件和对象的创建（createClass，createElement)React源码分析2 — React组件插入DOM流程React源码分析3 — React生命周期详解React源码分析4 — setState机制React源码分析5 -- 组件通信，refs，key，ReactDOMReact源码分析6 — React合成事件系统 1 React合成事件特点 React自己实现了一套高效的事件注册，存储，分发和重用逻辑，在DOM事件体系基础上做了很大改进，减少了内存消耗，简化了事件逻辑，并最大化的解决了IE等浏览器的不兼容问题。与DOM事件体系相比，它有如下特点 React组件上声明的事件最终绑定到了document这个DOM节点上，而不是React组件对应的DOM节点。故只有document这个节点上面才绑定了DOM原生事件，其他节点没有绑定事件。这样简化了DOM原生事件，减少了内存开销 React以队列的方式，从触发事件的组件向父组件回溯，调用它们在JSX中声明的callback。也就是React自身实现了一套事件冒泡机制。我们没办法用event.stopPropagation()来停止事件传播，应该使用event.preventDefault() React有一套自己的合成事件SyntheticEvent，不同类型的事件会构造不同的SyntheticEvent React使用对象池来管理合成事件对象的创建和销毁，这样减少了垃圾的生成和新对象内存的分配，大大提高了性能 那么这些特性是如何实现的呢，下面和大家一起一探究竟。 2 React事件系统 先看Facebook给出的React事件系统框图 浏览器事件（如用户点击了某个button）触发后，DOM将event传给ReactEventListener，它将事件分发到当前组件及以上的父组件。然后由ReactEventEmitter对每个组件进行事件的执行，先构造React合成事件，然后以queue的方式调用JSX中声明的callback进行事件回调。 涉及到的主要类如下 ReactEventListener：负责事件注册和事件分发。React将DOM事件全都注册到document这个节点上，这个我们在事件注册小节详细讲。事件分发主要调用dispatchEvent进行，从事件触发组件开始，向父元素遍历。我们在事件执行小节详细讲。 ReactEventEmitter：负责每个组件上事件的执行。 EventPluginHub：负责事件的存储，合成事件以对象池的方式实现创建和销毁，大大提高了性能。 SimpleEventPlugin等plugin：根据不同的事件类型，构造不同的合成事件。如focus对应的React合成事件为SyntheticFocusEvent 2 事件注册 JSX中声明一个React事件十分简单，比如 render() { return ( div onClick = { (event) = {console.log(JSON.stringify(event))} } / ); } 那么它是如何被注册到React事件系统中的呢？ 还是先得从组件创建和更新的入口方法mountComponent和updateComponent说起。在这两个方法中，都会调用到_updateDOMProperties方法，对JSX中声明的组件属性进行处理。源码如下 _updateDOMProperties: function (lastProps, nextProps, transaction) { ... // 前面代码太长，省略一部分 else if (registrationNameModules.hasOwnProperty(propKey)) { // 如果是props这个对象直接声明的属性，而不是从原型链中继承而来的，则处理它 // nextProp表示要创建或者更新的属性，而lastProp则表示上一次的属性 // 对于mountComponent，lastProp为null。updateComponent二者都不为null。unm