摘要:事件簡(jiǎn)介事件是合成事件,所有事件都自動(dòng)綁定到最外層上。支持事件的冒泡機(jī)制,我們可以使用和來(lái)中斷它。這樣做簡(jiǎn)化了事件處理和回收機(jī)制,效率也有很大提升。事件類型合成事件的事件類型是原生事件類型的一個(gè)子集。
React事件簡(jiǎn)介
React事件是合成事件,所有事件都自動(dòng)綁定到最外層上。因?yàn)?strong>Virtual DOM 在內(nèi)存中是以對(duì)象的形式存在的,所以React 基于 Virtual DOM 實(shí)現(xiàn)了一個(gè) SyntheticEvent (合成事件)層,我們所定義的事件 處理器會(huì)接收到一個(gè) SyntheticEvent 對(duì)象的實(shí)例。支持事件的冒泡機(jī)制,我 們可以使用 stopPropagation() 和 preventDefault() 來(lái)中斷它。沒(méi)有兼容問(wèn)題。
事件綁定?
事件綁定的方式與原生事件綁定相似,但是必須使用駝峰的形式來(lái)書寫事件的屬性名(比如 onClick);
React 并不會(huì)像 DOM0 級(jí)事件那樣將事件處理器直接綁定到 HTML 元素之上,而是一個(gè)函數(shù)指針:
button onclick="handleClick()">Test //dom0合成事件的實(shí)現(xiàn)機(jī)制
在 React 底層,主要對(duì)合成事件做了兩件事:事件委派和自動(dòng)綁定。
1.事件委派
React并不會(huì)把事件處理函數(shù)直接綁定到真實(shí)的節(jié)點(diǎn)上,而是把所有事件綁定到結(jié)構(gòu)的最外層,使用一個(gè)統(tǒng)一的事件監(jiān)聽(tīng)器,這個(gè)事件監(jiān)聽(tīng)器上維持了一個(gè)映射來(lái)保存所有組件內(nèi)部的事件監(jiān)聽(tīng)和處理函數(shù)。當(dāng)組件掛載或卸載時(shí),只是 在這個(gè)統(tǒng)一的事件監(jiān)聽(tīng)器上插入或刪除一些對(duì)象;當(dāng)事件發(fā)生時(shí),首先被這個(gè)統(tǒng)一的事件監(jiān)聽(tīng)器 處理,然后在映射里找到真正的事件處理函數(shù)并調(diào)用。這樣做簡(jiǎn)化了事件處理和回收機(jī)制,效率 也有很大提升。
2. 自動(dòng)綁定
在 React 組件中,每個(gè)方法的上下文都會(huì)指向該組件的實(shí)例,即自動(dòng)綁定this為當(dāng)前組件。但是使用 ES6 classes 或者純函數(shù)時(shí),需要手動(dòng)實(shí)現(xiàn)this的綁定。具體有如下方法:
1》通過(guò)bind方法實(shí)現(xiàn);每次重新渲染時(shí),都會(huì)生成一個(gè)新的函數(shù)實(shí)例保存在listenerBank中,浪費(fèi)內(nèi)存
render() { // 通過(guò)bind方法實(shí)現(xiàn),可以傳遞參數(shù) return ; } render() {//不傳遞參數(shù)時(shí),也可以使用::代替 return ; }
2》構(gòu)造器內(nèi)使用bind綁定;不用每次調(diào)用都綁定。推薦
import React, { Component } from "react"; class App extends Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick(e) { console.log(e); } render() { return ; } }
3》箭頭函數(shù)
class App extends Component { //不能帶參數(shù) const handleClick = (e) => { console.log(e); }; render() { return ; } }
class App extends Component { //也是每次渲染都會(huì)生成新的函數(shù)實(shí)例 handleClick(e) { console.log(e); } render() { return } }對(duì)比React合成事件與JavaScript原生事件
對(duì)于無(wú)法使用 React 合成事件的場(chǎng)景,我們還需要使用原生事件來(lái)完成。從 4 個(gè)方面來(lái)對(duì)比 React 合成事件與 JavaScript 原生事件。
1.事件傳播與阻止事件傳播
瀏覽器原生 DOM 事件的傳播可以分為 3 個(gè)階段:事件捕獲階段、目標(biāo)對(duì)象本身的事件處理程序調(diào)用以及事件冒泡。將 e.addEventListener() 的第三 個(gè)參數(shù)設(shè)置為 true 時(shí),可以為事件注冊(cè)捕獲階段,但是ie9一下不支持,所以沒(méi)什么意義。react只提供了事件冒泡機(jī)制,通過(guò)e.prevent- Default() 即可。阻止原生事件傳播需要使用 e.preventDefault(),不過(guò)對(duì)于不支持該方法的瀏覽器(IE9 以 下),只能使用 e.cancelBubble = true 來(lái)阻止。
2.事件類型
React 合成事件的事件類型是 JavaScript 原生事件類型的一個(gè)子集。
3.事件綁定方式
受到 DOM 標(biāo)準(zhǔn)的影響,綁定瀏覽器原生事件的方式也有很多種,具體如下所示。
1》直接在 DOM 元素中綁定:
2》在 JavaScript 中,通過(guò)為元素的事件屬性賦值的方式實(shí)現(xiàn)綁定:
el.onclick = e => { console.log(e); }
3》通過(guò)事件監(jiān)聽(tīng)函數(shù)來(lái)實(shí)現(xiàn)綁定:
el.addEventListener("click", () => {}, false); el.attachEvent("onclick", () => {});
相比而言,React 合成事件的綁定方式則簡(jiǎn)單得多:
4.事件對(duì)象
原生 DOM 事件對(duì)象在 W3C 標(biāo)準(zhǔn)和 IE 標(biāo)準(zhǔn)下存在著差異。在低版本的 IE 瀏覽器中,只能
使用 window.event 來(lái)獲取事件對(duì)象。而在 React 合成事件系統(tǒng)中,不存在這種兼容性問(wèn)題,在事
件處理函數(shù)中可以得到一個(gè)合成事件對(duì)象。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/54163.html
摘要:事件簡(jiǎn)介事件是合成事件,所有事件都自動(dòng)綁定到最外層上。支持事件的冒泡機(jī)制,我們可以使用和來(lái)中斷它。這樣做簡(jiǎn)化了事件處理和回收機(jī)制,效率也有很大提升。事件類型合成事件的事件類型是原生事件類型的一個(gè)子集。 React事件簡(jiǎn)介 React事件是合成事件,所有事件都自動(dòng)綁定到最外層上。因?yàn)閂irtual DOM 在內(nèi)存中是以對(duì)象的形式存在的,所以React 基于 Virtual DOM 實(shí)現(xiàn)了...
摘要:因?yàn)榘姹緦⒄嬲龔U棄這三生命周期到目前為止,的渲染機(jī)制遵循同步渲染首次渲染,更新時(shí)更新時(shí)卸載時(shí)期間每個(gè)周期函數(shù)各司其職,輸入輸出都是可預(yù)測(cè),一路下來(lái)很順暢。通過(guò)進(jìn)一步觀察可以發(fā)現(xiàn),預(yù)廢棄的三個(gè)生命周期函數(shù)都發(fā)生在虛擬的構(gòu)建期間,也就是之前。 showImg(https://segmentfault.com/img/bVbweoj?w=559&h=300); 背景 前段時(shí)間準(zhǔn)備前端招聘事項(xiàng)...
摘要:聲明的變量不得改變值,這意味著,一旦聲明變量,就必須立即初始化,不能留到以后賦值。 雖然今年沒(méi)有換工作的打算 但為了跟上時(shí)代的腳步 還是忍不住整理了一份最新前端知識(shí)點(diǎn) 知識(shí)點(diǎn)匯總 1.HTML HTML5新特性,語(yǔ)義化瀏覽器的標(biāo)準(zhǔn)模式和怪異模式xhtml和html的區(qū)別使用data-的好處meta標(biāo)簽canvasHTML廢棄的標(biāo)簽IE6 bug,和一些定位寫法css js放置位置和原因...
摘要:聲明的變量不得改變值,這意味著,一旦聲明變量,就必須立即初始化,不能留到以后賦值。 雖然今年沒(méi)有換工作的打算 但為了跟上時(shí)代的腳步 還是忍不住整理了一份最新前端知識(shí)點(diǎn) 知識(shí)點(diǎn)匯總 1.HTML HTML5新特性,語(yǔ)義化瀏覽器的標(biāo)準(zhǔn)模式和怪異模式xhtml和html的區(qū)別使用data-的好處meta標(biāo)簽canvasHTML廢棄的標(biāo)簽IE6 bug,和一些定位寫法css js放置位置和原因...
摘要:聲明的變量不得改變值,這意味著,一旦聲明變量,就必須立即初始化,不能留到以后賦值。 雖然今年沒(méi)有換工作的打算 但為了跟上時(shí)代的腳步 還是忍不住整理了一份最新前端知識(shí)點(diǎn) 知識(shí)點(diǎn)匯總 1.HTML HTML5新特性,語(yǔ)義化瀏覽器的標(biāo)準(zhǔn)模式和怪異模式xhtml和html的區(qū)別使用data-的好處meta標(biāo)簽canvasHTML廢棄的標(biāo)簽IE6 bug,和一些定位寫法css js放置位置和原因...
閱讀 1264·2021-09-23 11:51
閱讀 1369·2021-09-04 16:45
閱讀 626·2019-08-30 15:54
閱讀 2075·2019-08-30 15:52
閱讀 1593·2019-08-30 11:17
閱讀 3098·2019-08-29 13:59
閱讀 2010·2019-08-28 18:09
閱讀 380·2019-08-26 12:15