react事件和原生事件有哪些區(qū)別
這篇文章主要介紹了react事件和原生事件有哪些區(qū)別的相關知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇react事件和原生事件有哪些區(qū)別文章都會有所收獲，下面我們一起來看看吧。
創(chuàng)新互聯(lián)公司自2013年起，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目成都網(wǎng)站制作、成都做網(wǎng)站網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元龍泉做網(wǎng)站,已為上家服務,為龍泉各地企業(yè)和個人服務,聯(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就是為了實現(xiàn)一些動態(tài)的操作，而用戶會有時候想去實現(xiàn)一些功能，如提交表單，鼠標點擊等，就要在瀏覽器中觸發(fā)這個事件，然后瀏覽器會感知（或者說捕獲）到用戶的這個行為，就會去響應處理這個事件。這個就稱之為事件。
什么是事件對象？
系統(tǒng)在調(diào)用處理程序時，把事件會發(fā)生的一切信息，都封裝成一個對象，然后作為一個參數(shù)傳遞給事件處理程序，而這個對象就是事件對象。在原生的函數(shù)中，經(jīng)常會看見一個event的東西，而這個東西就是我們說的事件對象。
react在事件處理上具有如下優(yōu)點：
幾乎所有的事件都代理（delegate）到document，達到性能優(yōu)化的目的
對于每種類型的事件，統(tǒng)一使用擁分發(fā)函數(shù)（dispatchEven）分發(fā)事件
事件對象（event）是合成對象（syntheticEvent），不是原生的
React合成事件
為什么會抽象為合成事件？
如果把所有的事件處理函數(shù)都綁定在DOM上，那么在頁面響應的時候就會收到影響，導致頁面很慢。react為了避免這類DOM事件的濫用，同時屏蔽底層之間不同瀏覽器事件的系統(tǒng)差異，實現(xiàn)了一個中間層- syntheticEvent
原理
在react中，如果需要綁定事件，一般都會這會在JSX中這么寫：
我是react點擊事件
但是在react中，并不是把該click事件真實的綁定在div的DOM上，而是綁定在了DOCUMENT上，當事件發(fā)生并且通過冒泡的方式冒泡至document時，react才會將事件的內(nèi)容交給相對應的函數(shù)去處理
如何在react中使用原生事件
雖然react幾乎封裝了所有的原生事件，但諸如：
Modal開啟以后，點擊其他空白區(qū)域需要關閉Modal
引入一些以原生事件實現(xiàn)的第三方庫，并且相互之間需要有交互
等等場景時，不得不使用原生事件來進行業(yè)務邏輯處理。
由于原生事件需要綁定在真實的DOM上，所以一般在compoentdidmout/ref函數(shù)執(zhí)行階段進行綁定。
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 demo
}
}原生事件和合成事件的混合使用
如果在業(yè)務場景中，需要混合使用原生事件和合成事件，那么在使用的過程中，需要注意如下幾點：
響應的順序
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 demo
}
}
結果輸出：
dom event! react event!
原因分析：首先我們知道原生事件是綁定在DOM上面的，而合成事件是綁定在document上面的，因此DOM上面的事件先被冒泡，則先執(zhí)行，然后再冒泡到document，合成事件才被執(zhí)行
關于“react事件和原生事件有哪些區(qū)別”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“react事件和原生事件有哪些區(qū)別”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)站名稱：react事件和原生事件有哪些區(qū)別
本文URL：
http://weahome.cn/article/gddisg.html
重慶分公司
重慶分公司
