React onClick 和 JavaScript事件委托

JavaScript事件委托

　　事件委托是，一个事件理应绑定到相应需要触发的元素上，但却将该事件绑定到其父元素上，利用事件冒泡原理，触发其事件。

　　使用方法：现页面上有一个ul，ul下有多个li，给ul绑定一个点击事件，每个li给定一个标识，当点击li时，会触发ul的点击，ul能够获取到li的下标，根据每个li的下标进行不同的事件执行。

React 的 onClick

　　那么，react中的onClick和JavaScript的事件委托有什么关系呢？

　　使用过或了解过react的开发者大概都知道，react是使用JSX的。JSX把类似HTML的标记语言和JavaScript混在了一起，那么我们也不难发现，JSX的点击事件使用onClick绑定，而在HTML中，使用onclick进行绑定。这两个看似是一样的，实则不然。

　　在HTML中直接使用onclick，其实它添加的事件处理函数是在全局环境下执行的，这污染了全局环境。而且，在一些事件处理比较多的页面中，很多DOM元素都会添加onclick事件，可能会影响网页的性能。最后，对于使用onclick的DOM元素，如果要动态地从DOM树种删除，需要把对应的事件处理器注销，若忘了注销，可能会造成内存泄漏。

　　以上是在HTML中使用onclick的弊端，但是在JSX中使用onClick并不存在这些问题，因为这两者有着本质的区别。我们知道，react做出来的页面实则是单页面应用。单页面应用的所有一切都是组件，那么onClick挂载的每个函数，都不会污染全局，可以控制在当前的组件中。另外，虽然JSX的onClick和HTML中的onclick看起来差不多，但是它并没有产生直接使用onclick的HTML，而是使用了时间委托的方式处理点击事件，无论有多少个onClick，最后渲染时，都只是在DOM树上添加了一个事件处理函数，挂载在第一级的DOM节点上。而且，由于react的生命周期，在组件unmount阶段，挂载的事件都会被清除。

　　以上。