成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React事件

Cciradih / 825人閱讀

摘要：在中使用原生事件在中使用原生事件級(jí)事件和。的合成事件實(shí)現(xiàn)中，僅僅對(duì)最外層容器進(jìn)行綁定，并且依賴事件冒泡完成事件委派，避免了事件捕獲的瀏覽器不兼容特性。

Event Handler ----React事件

React中的事件包括合成事件和原生事件，React底層對(duì)合成事件進(jìn)行事件委派和手動(dòng)綁定，原生事件的使用在高程3有具體講解，難點(diǎn)在于跨瀏覽器兼容和DOM0/DOM2級(jí)事件處理程序的使用方法不同，這可以通過編寫工具函數(shù)屏蔽瀏覽器差異，關(guān)于原生事件的描述在《Event Handler 事件處理程序 1》和《Event Handler 事件處理程序 2》中有詳細(xì)解釋。

合成事件：事件委派

React不會(huì)把事件處理函數(shù)直接綁定到真實(shí)的節(jié)點(diǎn)上，而是把所有事件綁定到最外層，使用一個(gè)統(tǒng)一的事件監(jiān)聽器，這個(gè)事件監(jiān)聽器上維持了一個(gè)映射來保存所有組件內(nèi)部的事件監(jiān)聽和函數(shù)。當(dāng)組件掛載或者卸載時(shí)，只是在這個(gè)統(tǒng)一的事件監(jiān)聽器上插入或者刪除一些對(duì)象；當(dāng)事件發(fā)生時(shí)，首先被這個(gè)統(tǒng)一的事件監(jiān)聽器處理，然后在映射里找到真正的事件處理函數(shù)并調(diào)用。這簡化了事件處理和回收機(jī)制，效率也有很大提升。

合成事件：手動(dòng)綁定

使用class或者純函數(shù)創(chuàng)建組件時(shí)，this不會(huì)自動(dòng)綁定，需要手動(dòng)綁定：
1）bind方法，可以傳遞參數(shù)；
//在button上綁定事件處理函數(shù)，類似于DOM0級(jí)事件綁定

    return

2）在class的構(gòu)造函數(shù)constructor內(nèi)部完成this綁定，僅需要一次綁定；

    this.handleClick = this.handleClick.bind(this);

這是我目前常用的方法，一般在super(props)后面。

3）在組件內(nèi)部創(chuàng)建時(shí)間通過箭頭函數(shù)創(chuàng)建事件處理程序以實(shí)現(xiàn)綁定，由于箭頭函數(shù)自動(dòng)綁定了定義此函數(shù)作用域的this，不需要再使用bind方法。

    class App extends Component{
        const handle(e) = (e) =>{console.log(e);};
        render(){
        return ;
        }
    }
在React中使用原生事件

在React中使用原生事件DOM2級(jí)事件：addEventListener()和removeEventListener()。為什么使用原生事件？因?yàn)橛行r(shí)候需要將事件綁定在組件的父級(jí)元素上。在React中一般在componentDidMount之后調(diào)用原生事件，這時(shí)DOM節(jié)點(diǎn)已經(jīng)確定。一定要在組件卸載時(shí)（componentWillUnmount）手動(dòng)解除綁定，不然內(nèi)存就會(huì)泄露。合成事件系統(tǒng)不需要這樣，React已經(jīng)妥善處理了這一點(diǎn)（怎么處理的？）。

對(duì)比React事件和JavaScript原生事件（DOM2級(jí)事件）

JavaScript原生事件傳播有事件捕獲、事件冒泡兩個(gè)先后的過程，分別是由外到內(nèi)和由內(nèi)到外，事件捕獲并不是一個(gè)通用的技術(shù)，在低于IE9版本的瀏覽器中無法使用。而且IE瀏覽器的事件處理機(jī)制和其他瀏覽器不同，通過原生JavaScript實(shí)現(xiàn)的通用事件處理程序中一般使用if else語句對(duì)瀏覽器差異性進(jìn)行屏蔽。React的合成事件實(shí)現(xiàn)中，僅僅對(duì)最外層容器進(jìn)行綁定，并且依賴事件冒泡完成事件委派，避免了事件捕獲的瀏覽器不兼容特性。

最好避免同時(shí)使用原生事件和合成事件，混用時(shí)由于合成事件機(jī)制將事件綁定在了最外層，對(duì)內(nèi)層組件上的事件處理函數(shù)使用e.preventDefault()無法阻止事件默認(rèn)操作，因?yàn)槭录恢雷陨斫壎ㄔ趦?nèi)部組件上。最好的方法是不混用合成事件和原生事件，或者混用時(shí)通過在if語句中使用e.target判斷事件的直接綁定元素是不是內(nèi)部組件。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116508.html

相關(guān)文章

  • 5、React組件事件詳解

    摘要：組件事件響應(yīng)在構(gòu)建虛擬的同時(shí)，還構(gòu)建了自己的事件系統(tǒng)且所有事件對(duì)象和規(guī)范保持一致。的事件系統(tǒng)和瀏覽器事件系統(tǒng)相比，主要增加了兩個(gè)特性事件代理和事件自動(dòng)綁定。 React組件事件響應(yīng) React在構(gòu)建虛擬DOM的同時(shí)，還構(gòu)建了自己的事件系統(tǒng)；且所有事件對(duì)象和W3C規(guī)范保持一致。 React的事件系統(tǒng)和瀏覽器事件系統(tǒng)相比，主要增加了兩個(gè)特性：事件代理、和事件自動(dòng)綁定。 1、事件代理 ...

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

  • 【React深入】React事件機(jī)制

    摘要：給注冊原生事件回調(diào)為統(tǒng)一的事件分發(fā)機(jī)制。根據(jù)元素唯一標(biāo)識(shí)和事件類型從中取出回調(diào)函數(shù)返回帶有合成事件參數(shù)的回調(diào)函數(shù)總流程將上面的四個(gè)流程串聯(lián)起來。可見，回調(diào)函數(shù)是直接調(diào)用調(diào)用的，并沒有指定調(diào)用的組件，所以不進(jìn)行手動(dòng)綁定的情況下直接獲取到的是。 關(guān)于React事件的疑問 1.為什么要手動(dòng)綁定this 2.React事件和原生事件有什么區(qū)別 3.React事件和原生事件的執(zhí)行順序，可以混...

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

  • 談?wù)?em>React事件機(jī)制和未來(react-events)

    摘要：另外第三方也可以通過的事件插件機(jī)制來合成自定義事件，盡管很少人這么做。抽象跨平臺(tái)事件機(jī)制。打算干預(yù)事件的分發(fā)。事件是的一個(gè)自定義事件，旨在規(guī)范化表單元素的變動(dòng)事件。 showImg(https://segmentfault.com/img/remote/1460000019961124?w=713&h=307); 當(dāng)我們在組件上設(shè)置事件處理器時(shí)，React并不會(huì)在該DOM元素上直接綁定...

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

  • 深入React知識(shí)點(diǎn)整理（一）

    摘要：以我自己的理解，函數(shù)式編程就是以函數(shù)為中心，將大段過程拆成一個(gè)個(gè)函數(shù)，組合嵌套使用。越來越多的跡象表明，函數(shù)式編程已經(jīng)不再是學(xué)術(shù)界的最愛，開始大踏步地在業(yè)界投入實(shí)用。也許繼面向?qū)ο缶幊讨?，函?shù)式編程會(huì)成為下一個(gè)編程的主流范式。 使用React也滿一年了，從剛剛會(huì)使用到逐漸探究其底層實(shí)現(xiàn)，以便學(xué)習(xí)幾招奇技淫巧從而在自己的代碼中使用，寫出高效的代碼。下面整理一些知識(shí)點(diǎn)，算是React看書...

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

  • react開發(fā)教程（七）React事件系統(tǒng)

    摘要：按鈕中使用原生事件中提供了很好的合成事件系統(tǒng)，但有時(shí)候也需要用到原生事件。而使用合成事件系統(tǒng)時(shí)則不需要，因?yàn)閮?nèi)部以及處理了。事件類型鍵盤事件焦點(diǎn)事件表單事件鼠標(biāo)事件選擇事件觸摸事件事件動(dòng)畫事件圖像事件媒體事件剪貼板事件上一篇開發(fā)教程六與 事件系統(tǒng) Virtual DOM在內(nèi)存中是以對(duì)象的形式存在的，如果想要在這些對(duì)象上添加事件的話，React是基于Virtual DOM實(shí)現(xiàn)了一個(gè)合成事...

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

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

0條評(píng)論

閱讀需要支付1元查看
<