zoukankan      html  css  js  c++  java
  • 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阶段,挂载的事件都会被清除。

      以上。

  • 相关阅读:
    Access使用记录
    html js 表单提交前检测数据
    asp.net mvc5 action多个参数
    asp.net mvc Areas 母版页动态获取数据进行渲染
    asp.net mvc 自定义全局过滤器 验证用户是否登录
    .net 报错汇总——持续更新
    数据库基础
    Python协程
    Python 线程
    Python 队列
  • 原文地址:https://www.cnblogs.com/zhichong/p/13932148.html
Copyright © 2011-2022 走看看