JSX onClick 和 HTML onclick 的区别

在 JSX 中可以通过 onClick 这样的方式给一个元素添加一个事件处理函数,当然,在 HTML 中也可以用 onclick (小写 c),但在 HTML 中直接书写 onclick 一直就是为人垢病的写法,网页应用开发界一直倡导的是用 jQuery 的方法添加事件处理函数,直接写 onclick 会带来代码混乱的问题。

为什么 HTML 中直接使用 onclick 很不专业?

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

这就带来一个问题:
既然长期以来一直不倡导在 HTML 中使用 onclick,为什么在 React 的 JSX 中我们却要使用 onClick 这样的方式来添加事件处理函数呢?

JSX onClick 和 HTML onclick 的区别

上面 HTML onclick 的这些问题,在 JSX 中都不存在,JSX 的 onClick 事件处理方式和 HTML 的 onclick 有很大不同

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

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

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

posted @ 2021-05-06 22:33  Leophen  阅读(51)  评论(0编辑  收藏  举报