react事件和原生事件有哪些區(qū)別

這篇文章主要介紹了react事件和原生事件有哪些區(qū)別的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇react事件和原生事件有哪些區(qū)別文章都會(huì)有所收獲，下面我們一起來看看吧。

創(chuàng)新互聯(lián)公司自2013年起，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站制作、成都做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元龍泉做網(wǎng)站,已為上家服務(wù),為龍泉各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

react事件和原生事件的區(qū)別是：react中的事件是綁定到document上面；而原生的事件是綁定到dom上面。相對綁定的地方來說，dom上的事件要優(yōu)先于document上的事件執(zhí)行，react的事件對象是合成對象，不是原生的。

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

react事件和原生事件有什么區(qū)別

react中的事件是綁定到document上面的，

而原生的事件是綁定到dom上面的，

因此相對綁定的地方來說，dom上的事件要優(yōu)先于document上的事件執(zhí)行

什么是事件？

首先說JS就是為了實(shí)現(xiàn)一些動(dòng)態(tài)的操作，而用戶會(huì)有時(shí)候想去實(shí)現(xiàn)一些功能，如提交表單，鼠標(biāo)點(diǎn)擊等，就要在瀏覽器中觸發(fā)這個(gè)事件，然后瀏覽器會(huì)感知（或者說捕獲）到用戶的這個(gè)行為，就會(huì)去響應(yīng)處理這個(gè)事件。這個(gè)就稱之為事件。

什么是事件對象？

系統(tǒng)在調(diào)用處理程序時(shí)，把事件會(huì)發(fā)生的一切信息，都封裝成一個(gè)對象，然后作為一個(gè)參數(shù)傳遞給事件處理程序，而這個(gè)對象就是事件對象。在原生的函數(shù)中，經(jīng)常會(huì)看見一個(gè)event的東西，而這個(gè)東西就是我們說的事件對象。

react在事件處理上具有如下優(yōu)點(diǎn)：

  • 幾乎所有的事件都代理（delegate）到document，達(dá)到性能優(yōu)化的目的

  • 對于每種類型的事件，統(tǒng)一使用擁分發(fā)函數(shù)（dispatchEven）分發(fā)事件

  • 事件對象（event）是合成對象（syntheticEvent），不是原生的

React合成事件

為什么會(huì)抽象為合成事件？

如果把所有的事件處理函數(shù)都綁定在DOM上，那么在頁面響應(yīng)的時(shí)候就會(huì)收到影響，導(dǎo)致頁面很慢。react為了避免這類DOM事件的濫用，同時(shí)屏蔽底層之間不同瀏覽器事件的系統(tǒng)差異，實(shí)現(xiàn)了一個(gè)中間層- syntheticEvent

原理

在react中，如果需要綁定事件，一般都會(huì)這會(huì)在JSX中這么寫：

<div onClick={this.onClick}>我是react點(diǎn)擊事件</div>

但是在react中，并不是把該click事件真實(shí)的綁定在div的DOM上，而是綁定在了DOCUMENT上，當(dāng)事件發(fā)生并且通過冒泡的方式冒泡至document時(shí)，react才會(huì)將事件的內(nèi)容交給相對應(yīng)的函數(shù)去處理

如何在react中使用原生事件

雖然react幾乎封裝了所有的原生事件，但諸如：

Modal開啟以后，點(diǎn)擊其他空白區(qū)域需要關(guān)閉Modal

引入一些以原生事件實(shí)現(xiàn)的第三方庫，并且相互之間需要有交互

等等場景時(shí)，不得不使用原生事件來進(jìn)行業(yè)務(wù)邏輯處理。

由于原生事件需要綁定在真實(shí)的DOM上，所以一般在compoentdidmout/ref函數(shù)執(zhí)行階段進(jìn)行綁定。

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

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

如果在業(yè)務(wù)場景中，需要混合使用原生事件和合成事件，那么在使用的過程中，需要注意如下幾點(diǎn)：

響應(yīng)的順序

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

結(jié)果輸出：

dom event! react event!

原因分析：首先我們知道原生事件是綁定在DOM上面的，而合成事件是綁定在document上面的，因此DOM上面的事件先被冒泡，則先執(zhí)行，然后再冒泡到document，合成事件才被執(zhí)行

關(guān)于“react事件和原生事件有哪些區(qū)別”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“react事件和原生事件有哪些區(qū)別”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站名稱：react事件和原生事件有哪些區(qū)別
本文路徑：http://muchs.cn/article36/gddisg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、品牌網(wǎng)站制作、、做網(wǎng)站、電子商務(wù)、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)