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

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

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

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

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

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

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

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

什么是事件？

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

什么是事件對(duì)象？

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

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

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

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

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

React合成事件

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

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

原理

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

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

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

如何在react中使用原生事件

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

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

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

等等場(chǎng)景時(shí)，不得不使用原生事件來(lái)進(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ù)場(chǎng)景中，需要混合使用原生事件和合成事件，那么在使用的過(guò)程中，需要注意如下幾點(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)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“react事件和原生事件有哪些區(qū)別”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。