为什么不在HTML中直接用onclick的方式而jsx可以

onclick添加事件处理函数是在全局环境下执行的，这污染了全局环境，很容易产生意料不到的后果

给很多dom元素添加onclick事件，可能会影响网页的性能，毕竟网页需要的事件处理函数越来越多，性能就会降低。

对于使用onclick的dom元素，如果要动态的从dom树中删除的话，需要把对应的事件处理器注销，假如忘了注销，就可能造成内存泄漏。

jsx使用onClick

首先， onClick 挂载的每个函数，都可以控制在组件范围内，不会污染全局空间 。

我们在 JSX 中看到一个组件使用了 onClick，但并没有产生直接使用 onclick (注意 是 onclick不是 onClick)的 HTML，而是使用了事件委托(event delegation)的方式处理 点击事件，无论有多少个 onClick出现，其实最后都只在 DOM树上添加了一个事件处理 函数，挂在最顶层的 DOM 节点上。所有的点击事件都被这个事件处理函数捕获，然后 根据具体组件分配给特定函数，使用事件委托的性能当然要比为每个 onClick都挂载一 个事件处理函数要高 。

因为 React控制了组件的生命周期，在 unmount 的时候自然能够清除相关的所有事 件处理函数，内存泄露也不再是一个问题。

转载于:https://juejin.im/post/5cc69989f265da035f6fe2c2