即使现在我们还是要说在HTML中直接使用onclick很不专业,原因如下

  • onclik 添加的事件处理函数在全局环境下执行,这污染了全局环境,很容易产生意料不到的后果;
  • 给很多DOM元素添加onclick事件,可能会影响网页的性能,毕竟,网页需要的事件处理函数越多,性能就会越低;
  • 对于使用onclick的DOM元素,如果要动态的从DOM元素中删除的话,需要把对应的时间处理器注销,如果忘了可能会造成内存泄露,这样的bug很难被发现。

上面说的这些问题,在JSX中都不存在。
首先,onClick挂载的每个函数,都可以控制在组件范围内,不会污染全局空间。
我们在JSX中看到一个组件使用了onClick,但并没有产生直接使用onclick(注意是onclick而不是onClick)的HTML,而是使用了事件委托的方式处理点击事件,无论有多少个onClick出现,其实最后都只在DOM树上添加了一个事件处理函数,挂在最顶层的DOM节点上。所有的点击事件都被这个事件处理函数捕获,然后根据具体组件分配给特定函数,使用事件委托的性能当然要比为每个onClick都挂载一个事件处理函数要高。