国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

淺談React事件機(jī)制

moven_j / 1886人閱讀

摘要:事件簡(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

相關(guān)文章

  • 淺談React事件機(jī)制

    摘要:事件簡(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)了...

    MyFaith 評(píng)論0 收藏0
  • 淺談React Fiber

    摘要:因?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)...

    izhuhaodev 評(píng)論0 收藏0
  • 2018 淺談前端面試那些事

    摘要:聲明的變量不得改變值,這意味著,一旦聲明變量,就必須立即初始化,不能留到以后賦值。 雖然今年沒(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放置位置和原因...

    LiuRhoRamen 評(píng)論0 收藏0
  • 2018 淺談前端面試那些事

    摘要:聲明的變量不得改變值,這意味著,一旦聲明變量,就必須立即初始化,不能留到以后賦值。 雖然今年沒(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放置位置和原因...

    stormgens 評(píng)論0 收藏0
  • 2018 淺談前端面試那些事

    摘要:聲明的變量不得改變值,這意味著,一旦聲明變量,就必須立即初始化,不能留到以后賦值。 雖然今年沒(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放置位置和原因...

    Hujiawei 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

moven_j

|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<