react组件事件代理的原理

React的事件系统和浏览器事件系统相比，主要增加了两个特性：事件代理、和事件自动绑定。

1、事件代理

区别于浏览器事件处理方式，React并未将事件处理函数与对应的DOM节点直接关联，而是在顶层使用
了一个全局事件监听器监听所有的事件；
React会在内部维护一个映射表记录事件与组件事件处理函数的对应关系；
当某个事件触发时，React根据这个内部映射表将事件分派给指定的事件处理函数；
当映射表中没有事件处理函数时，React不做任何操作；
当一个组件安装或者卸载时，相应的事件处理函数会自动被添加到事件监听器的内部映射表中或从表中删除。

2、事件自动绑定

在JavaScript中创建回调函数时，一般要将方法绑定到特定的实例，以保证this的正确性；

首先回顾以下原生事件的两个方法：event.stopImmediatePropagation 和 event.stopPropagation ，前者可以阻止同一dom上的后续事件的执行以及阻止冒泡，后者仅能阻止冒泡。
测试如下：

默认情况下点击内部的div，会依次显示inner click1、inner click2、root click，这是因为以下事件是绑定在了冒泡阶段

 <div id="root">外部<div id="inner">内部</div></div><script>document.querySelector("#root").addEventListener('click',function(){alert('root click')});document.querySelector("#inner").addEventListener('click',function(){alert('inner click1')});document.querySelector("#inner").addEventListener('click',function(){alert('inner click2')});</script>

阻止事件冒泡，这时仅仅显示inner click1、inner click2，而没有显示root click了

  document.querySelector("#inner").addEventListener('click',function(evt){alert('inner click1')evt.stopPropagation();});

多次绑定事件，只执行一个，并且阻止冒泡，就只显示一个inner click1了。

   document.querySelector("#inner").addEventListener('click',function(evt){alert('inner click1')evt.stopImmediatePropagation();});

对于react合成事件系统的理解：

在react内通过onClick绑定的事件，实际上并没有把点击事件绑定到对应的元素上，而是统一放到了document上处理。点击一个元素，首先触发这个元素的原生绑定事件（这里不讨论捕获），接着事件冒泡，到了document上，先触发dispatch，即分发react的合成事件，这个触发过程也是和冒泡类似，从里向外的。dispatch结束后，触发document上剩余的原生事件，也就是说可以认为dispatch是document上的第一个原生绑定事件，这个事件内进行react合成事件的分发。

原生绑定的回调事件中获取到的是原生事件。通过react在jsx内onClick绑定的回调事件中获取到的是合成事件。

针对以上过程：

如何使所有绑定的react onClick无效？在子元素上原生绑定一个事件，然后阻止这个事件冒泡即可。

如何只执行子元素的onClick而不执行父元素的onClick？在子元素的onClick中阻止事件冒泡即可，注意这里获取到的是合成事件，调用的是合成事件的方法，也就是说不管是原生事件还是合成事件，
stopPropagation 的用法是一致的。

如何只执行onClick，而不触发document的原生事件呢？在onClick中，调用：
e.nativeEvent.stopImmediatePropagation
。这里的效果相当于在document的第一个原生事件（react自动绑定上的dispatch）中调用了
stopImmediatePropagation 阻止了 document 剩余的原生事件。