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

資訊專欄INFORMATION COLUMN

react的事件機(jī)制

bladefury / 829人閱讀

摘要：本博客大概介紹一下的事件機(jī)制，并給出整體的設(shè)計(jì)圖，但不涉及底層的源碼結(jié)構(gòu)分析。整個(gè)設(shè)計(jì)圖以上是對(duì)的合成事件一個(gè)大概的介紹，里面還有很多細(xì)節(jié)和原理沒(méi)說(shuō)到，有興趣的同學(xué)可以進(jìn)一步研究一下源碼的細(xì)節(jié)。

好久沒(méi)寫博客了，前段時(shí)間太忙以至于平時(shí)的積累都記錄在內(nèi)網(wǎng)的wiki里，趁著這幾天有空，將這段時(shí)間所積累的干貨慢慢的分享出來(lái)，如果內(nèi)容有不正確的地方，歡迎糾正。

本博客大概介紹一下react的事件機(jī)制，并給出整體的設(shè)計(jì)圖，但不涉及react底層的源碼結(jié)構(gòu)分析。

現(xiàn)象：

demo1: 
ni


demo2: render() { return 
ni
 }

雖然兩個(gè)例子都是通過(guò)標(biāo)簽內(nèi)嵌的方式將click事件進(jìn)行綁定，但其中的原理是不一樣的，demo1是采用原生的事件處理，demo2是采用react的合成事件機(jī)制處理；

合成事件：

對(duì)于jsx來(lái)說(shuō)，是采用了類似于DOM0的事件綁定的方式進(jìn)行處理，它會(huì)收到一個(gè)合成事件對(duì)象（synthicevent），該對(duì)象集成了原生事件對(duì)象的所有特性，而且還是事件冒泡機(jī)制，并且能支持stopPropagation和preventDefault兩種方法；

原生事件與合成事件的區(qū)別：

原生的事件綁定是采用小寫onclick，而react則是采用大寫onClick；

原生事件綁定的是一個(gè)js的字符串，而react采用的是一個(gè)函數(shù)的指針；

合成事件的實(shí)現(xiàn)機(jī)制：

事件機(jī)制原型圖：

該圖大概的表示了react的事件機(jī)制的整體結(jié)構(gòu)圖，接下來(lái)具體說(shuō)說(shuō)它里面的原理。

真正的監(jiān)聽(tīng)者：

對(duì)于react來(lái)說(shuō)，雖然事件是綁定在v-dom中，但其實(shí)真正的監(jiān)聽(tīng)者只有一個(gè)，就是結(jié)構(gòu)中最外層的document對(duì)象進(jìn)行監(jiān)聽(tīng)，主要采用了事件冒泡的方式，將v-dom中觸發(fā)的事件包裝成一個(gè)合成事件，然后通過(guò)事件冒泡的方式，最終冒泡到最外層的document監(jiān)聽(tīng)和執(zhí)行（就是事件委托）；

事件注冊(cè)：

事件注冊(cè)是在組件生成的時(shí)候，將v-dom中所有的事件都對(duì)應(yīng)的原生事件都注冊(cè)在document的監(jiān)聽(tīng)器中，例如onClick對(duì)應(yīng)的原生事件是onclick，如果v-dom中有綁定了onClick，那么就會(huì)將對(duì)應(yīng)的onclick事件注冊(cè)在document中，整個(gè)注冊(cè)過(guò)程可以三個(gè)階段：

1） 將v-dom中所涉及到的綁定事件所對(duì)應(yīng)的原生事件都在enqueuePutListener中綁定到document身上；

2） 將v-dom中所有事件的事件處理函數(shù)都存放在listenerBank中，存放的方式是以registrtionname和key作為索引存放，其中registrtionname是事件名，key是instance的id值，所以形式是：

   listenerBank[registrtionname][key] = listener

這樣的好處是將可能要觸發(fā)的事件分門別類，以及將對(duì)應(yīng)的listener也分門別類存放；為了就是在事件觸發(fā)的時(shí)候，能從listenerBank中取出同類型的listener存放在dispatchListener中；

3） 最后將dispatchEvent作為callback函數(shù)，放在addEventListener和removeEventListener里面，等待事件的觸發(fā)；

合成事件：

當(dāng)事件觸發(fā)的時(shí)候，不會(huì)直接將原生的事件發(fā)送到最外層的document中，而是經(jīng)過(guò)處理，將處理后的事件發(fā)送到document中；事件合成的經(jīng)過(guò)：獲取原生事件，并通過(guò)原生事件的類型和所在組件的id值，在listenerBank中取出對(duì)應(yīng)的listener函數(shù)，并存放在_dispatchListener隊(duì)列中，然后將該實(shí)例存放到_dispatchInstance隊(duì)列中，這樣一來(lái)，可以將同類型的事件函數(shù)都按照順序存放在_dispatchListener中，最后一同處理；

事件發(fā)布：

當(dāng)事件觸發(fā)時(shí)，會(huì)先原生事件變成合成事件，然后傳遞到document中，然后document會(huì)通過(guò)dispatchEvent回調(diào)函數(shù)依次執(zhí)行dispatchListener中同類型的事件監(jiān)聽(tīng)函數(shù)。

整個(gè)設(shè)計(jì)圖：

以上是對(duì)react的合成事件一個(gè)大概的介紹，里面還有很多細(xì)節(jié)和原理沒(méi)說(shuō)到，有興趣的同學(xué)可以進(jìn)一步研究一下源碼的細(xì)節(jié)。

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

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

相關(guān)文章

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

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

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

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

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

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

  • 結(jié)合源碼徹底理解 react事件機(jī)制原理 01 - 對(duì)事件機(jī)制的初步理解和驗(yàn)證

    摘要：前言這是事件機(jī)制的第一篇，主要內(nèi)容有表象理解，驗(yàn)證，意義和思考。因?yàn)楹铣墒录挠|發(fā)是基于瀏覽器的事件機(jī)制來(lái)實(shí)現(xiàn)的，通過(guò)冒泡機(jī)制冒泡到最頂層元素，然后再由統(tǒng)一去處理。合成事件的阻止冒泡不會(huì)影響原生事件。 showImg(https://segmentfault.com/img/bVbtvP2?w=800&h=420); 前言 這是 react 事件機(jī)制的第一篇，主要內(nèi)容有：表象理解，驗(yàn)證...

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

  • 淺談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)了...

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

  • 淺談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事件機(jī)制

    摘要：注冊(cè)事件的回調(diào)函數(shù)由來(lái)統(tǒng)一管理，根據(jù)事件的類型和組件標(biāo)識(shí)為唯一標(biāo)識(shí)事件并進(jìn)行存儲(chǔ)。利用中注入的例如會(huì)將原生的事件轉(zhuǎn)化成合成的事件，然后批量執(zhí)行存儲(chǔ)的回調(diào)函，回調(diào)函數(shù)的執(zhí)行分為兩步，第一步是將所有的合成事件放到事件隊(duì)列里面，第二步是逐個(gè)執(zhí)行。 　　最近在閱讀《深入React技術(shù)?！芬粫?shū)中，發(fā)現(xiàn)了之前使用React中并沒(méi)有注意到的React事件與瀏覽器原生事件之間的區(qū)別，鑒于好久已經(jīng)沒(méi)有寫...

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

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

0條評(píng)論

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