搜索
首页web前端前端问答react事件和原生事件有什么区别

react事件和原生事件的区别是:react中的事件是绑定到document上面;而原生的事件是绑定到dom上面。相对绑定的地方来说,dom上的事件要优先于document上的事件执行,react的事件对象是合成对象,不是原生的。

react事件和原生事件有什么区别

本教程操作环境:Windows10系统、react17.0.1版、Dell G3电脑。

react事件和原生事件有什么区别

react中的事件是绑定到document上面的,

而原生的事件是绑定到dom上面的,

因此相对绑定的地方来说,dom上的事件要优先于document上的事件执行

什么是事件?

首先说JS就是为了实现一些动态的操作,而用户会有时候想去实现一些功能,如提交表单,鼠标点击等,就要在浏览器中触发这个事件,然后浏览器会感知(或者说捕获)到用户的这个行为,就会去响应处理这个事件。这个就称之为事件。

什么是事件对象?

系统在调用处理程序时,把事件会发生的一切信息,都封装成一个对象,然后作为一个参数传递给事件处理程序,而这个对象就是事件对象。在原生的函数中,经常会看见一个event的东西,而这个东西就是我们说的事件对象。

react在事件处理上具有如下优点:

  • 几乎所有的事件都代理(delegate)到document,达到性能优化的目的

  • 对于每种类型的事件,统一使用拥分发函数(dispatchEven)分发事件

  • 事件对象(event)是合成对象(syntheticEvent),不是原生的

React合成事件

为什么会抽象为合成事件?

如果把所有的事件处理函数都绑定在DOM上,那么在页面响应的时候就会收到影响,导致页面很慢。react为了避免这类DOM事件的滥用,同时屏蔽底层之间不同浏览器事件的系统差异,实现了一个中间层- syntheticEvent

原理

在react中,如果需要绑定事件,一般都会这会在JSX中这么写:

<div onClick={this.onClick}>我是react点击事件</div>

但是在react中,并不是把该click事件真实的绑定在div的DOM上,而是绑定在了DOCUMENT上,当事件发生并且通过冒泡的方式冒泡至document时,react才会将事件的内容交给相对应的函数去处理

如何在react中使用原生事件

虽然react几乎封装了所有的原生事件,但诸如:

Modal开启以后,点击其他空白区域需要关闭Modal

引入一些以原生事件实现的第三方库,并且相互之间需要有交互

等等场景时,不得不使用原生事件来进行业务逻辑处理。

由于原生事件需要绑定在真实的DOM上,所以一般在compoentdidmout/ref函数执行阶段进行绑定。

class Demo extends Domponent {
    componentDidMount () {
        const parentDom = ReactDom.findDOMNode(this)
        const childDom = parentDom.queneSelector(&#39;.button&#39;);
        childDom.addEventListen(&#39;click&#39;,this.onDomClick, false)
    }
    
    onDOMClick = (e) => {
        
    }
    render () {
        return <div>demo</div>
    }
}

原生事件和合成事件的混合使用

如果在业务场景中,需要混合使用原生事件和合成事件,那么在使用的过程中,需要注意如下几点:

响应的顺序

class Demo extends Domponent {
    componentDidMount () {
        const parentDom = ReactDom.findDOMNode(this)
        const childDom = parentDom.queneSelector(&#39;.button&#39;);
        childDom.addEventListen(&#39;click&#39;,this.onDomClick, false)
    }
    
    onDOMClick = (e) => {
        console.log(&#39;dom event!&#39;)
    }
    onReactClick = (e) => {
        console.log(&#39;react event!&#39;)
    }   
    render () {
        return <div onClick={this.onReactClick}>demo</div>
    }
}

结果输出:

dom event! react event!

原因分析:首先我们知道原生事件是绑定在DOM上面的,而合成事件是绑定在document上面的,因此DOM上面的事件先被冒泡,则先执行,然后再冒泡到document,合成事件才被执行

推荐学习:《react视频教程

以上是react事件和原生事件有什么区别的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
react中canvas的用法是什么react中canvas的用法是什么Apr 27, 2022 pm 03:12 PM

在react中,canvas用于绘制各种图表、动画等;可以利用“react-konva”插件使用canvas,该插件是一个canvas第三方库,用于使用React操作canvas绘制复杂的画布图形,并提供了元素的事件机制和拖放操作的支持。

react中antd和dva是什么意思react中antd和dva是什么意思Apr 21, 2022 pm 03:25 PM

在react中,antd是基于Ant Design的React UI组件库,主要用于研发企业级中后台产品;dva是一个基于redux和“redux-saga”的数据流方案,内置了“react-router”和fetch,可理解为应用框架。

React是双向数据流吗React是双向数据流吗Apr 21, 2022 am 11:18 AM

React不是双向数据流,而是单向数据流。单向数据流是指数据在某个节点被改动后,只会影响一个方向上的其他节点;React中的表现就是数据主要通过props从父节点传递到子节点,若父级的某个props改变了,React会重渲染所有子节点。

react中为什么使用nodereact中为什么使用nodeApr 21, 2022 am 10:34 AM

因为在react中需要利用到webpack,而webpack依赖nodejs;webpack是一个模块打包机,在执行打包压缩的时候是依赖nodejs的,没有nodejs就不能使用webpack,所以react需要使用nodejs。

react是组件化开发吗react是组件化开发吗Apr 22, 2022 am 10:44 AM

react是组件化开发;组件化是React的核心思想,可以开发出一个个独立可复用的小组件来构造应用,任何的应用都会被抽象成一颗组件树,组件化开发也就是将一个页面拆分成一个个小的功能模块,每个功能完成自己这部分独立功能。

react和reactdom有什么区别react和reactdom有什么区别Apr 27, 2022 am 10:26 AM

react和reactdom的区别是:ReactDom只做和浏览器或DOM相关的操作,例如“ReactDOM.findDOMNode()”操作;而react负责除浏览器和DOM以外的相关操作,ReactDom是React的一部分。

react中forceupdate的用法是什么react中forceupdate的用法是什么Apr 19, 2022 pm 12:03 PM

在react中,forceupdate()用于强制使组件跳过shouldComponentUpdate(),直接调用render(),可以触发组件的正常生命周期方法,语法为“component.forceUpdate(callback)”。

react有没有双向绑定react有没有双向绑定Apr 21, 2022 am 10:24 AM

react中没有双向绑定;react的设计思想就是单向数据流,没有双向绑定的概念;react是view层,单项数据流只能由父组件通过props将数据传递给子组件,满足了view层渲染的要求并且更易测试与控制,所以在react中没有双向绑定。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。