关于react的事件代理

今天在写react列表的时候在想，我们给每个列表元素绑定事件,如果元素很多不就造成浪费了么
所以写了个列表研究下react的事件绑定
render内代码如下

const listData = [1, 2, 3, 4, 5]
const liList = listData.map(( ele, index ) =>
  <li key={index} onClick={() => console.log( index )}>
    {ele}
  </li>
)
return (
  <ul>{liList}</ul>
)

打开chrome发现 li 元素上绑定有两个事件

将两个绑定的事件remove后再点击 li 元素，发现还是能console出相应的index=。=

然后网上翻了下，找到了原因:
jsx不会真正的绑定事件到每一个具体的元素上，而是采用事件代理的模式：在根节点document上为每种事件添加唯一的listener，然后通过事件的target找到真实的触发元素，这样从触发元素到顶层节点之间的所有节点如果有绑定这个事件，react都会触发相应的事件处理函数，这就是所谓的react模拟事件系统

随后在chrome中删除了body上绑定的点击事件后果然不再console出index了。