React事件代理

review代码的时候 老大看到了这样的代码

list.map((item,index) => {    <p onClick={() => this.clickHandler(item.name)} key={index}>{item}</p>})

于是乎提出了问题：这样绑事件，如果list里有100条，会绑100次事件，形成100个函数，性能消耗略大，推荐尝试使用事件代理

然后，想了下，事件代理，如果想传name，好像还需要在代理的容器上取到当前元素再取它的name，然后好像就要在p上再加一个data-xxx来保存这个name，恍惚看到了JQuery的影子

然后，又想到似乎听哪位前辈说过react有对事件做处理，于是这样绑事件，在chrome里试了下

---

dom结构长这样，点击两个按钮，会分别出现弹层显示对应内容

然后发现，按照原来onclick的绑法，button上的事件不应该是空啊，于是乎把button上的click事件方法remove，像这样：

再去点击button，还是可以显示弹层！

再接再厉，把button上的事件留下，删掉document上的事件，像这样：

果然点击button时没有弹层了！

然后，在网上查了下原理，找到这样一段，

和原生HTML定义事件的唯一区别就是JSX采用驼峰写法来描述事件名称，大括号中仍然是标准的JavaScript表达式，返回一个事件处理函数。在JSX中你不需要关心什么时机去移除事件绑定，因为React会在对应的真实DOM节点移除时就自动解除了事件绑定。

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

附上原文链接http://www.infoq.com/cn/articles/react-jsx-and-component/

终于可以放心大胆的写onClick了~

---

以上，有想到再补充，新人 如果文章中有不成熟不正确的想法 敬请拍砖~