結(jié)合源碼徹底理解 react事件機(jī)制原理 03 - 事件注冊

chaosx110 發(fā)布于2019-08-23 17:57 / 2244人閱讀

摘要：文章涉及到的源碼是基于版本，雖然不是最新版本但是也不會影響我們對事件機(jī)制的整體把握和理解。到這里事件注冊就完事兒了。

前言

這是 react 事件機(jī)制的第三節(jié) - 事件注冊，通過本文你將了解react 事件的注冊過程，以及在這個過程中主要經(jīng)過了哪些關(guān)鍵步驟，同時結(jié)合源碼進(jìn)行驗(yàn)證和增強(qiáng)理解。

文章涉及到的源碼是基于 react15.6.1版本，雖然不是最新版本但是也不會影響我們對 react 事件機(jī)制的整體把握和理解。

文中不會說非常細(xì)節(jié)的內(nèi)容，而是會把大概的流程和原理性的內(nèi)容進(jìn)行介紹，做到對整體流程有個認(rèn)知和理解。

內(nèi)容大綱

主要做兩件事（事件注冊、事件存儲）

大致流程

具體執(zhí)行過程

總結(jié)

1. 主要做兩件事

按照我的理解，react 事件注冊過程其實(shí)主要做了2件事：

a. 事件注冊

b. 事件存儲

a. 事件注冊 - 組件掛載階段，根據(jù)組件內(nèi)的聲明的事件類型-onclick，onchange 等，給 document 上添加事件 -addEventListener，并指定統(tǒng)一的事件處理程序 dispatchEvent。

b. 事件存儲 - 就是把 react 組件內(nèi)的所有事件統(tǒng)一的存放到一個地方，也就是緩存起來，可以理解成放入一個對象內(nèi)，為了在觸發(fā)事件的時候可以查找到對應(yīng)的方法去執(zhí)行。

再配個圖

2. 大致流程

上面大致說了事件注冊需要完成的兩個目標(biāo)，那完成目標(biāo)的過程需要經(jīng)過哪些關(guān)鍵處理呢？

首先 react 拿到將要掛載的組件的虛擬 dom（其實(shí)就是 react dom，類似一個對象），然后處理react dom 的 props ，判斷屬性內(nèi)是否有聲明為事件的屬性，比如onclick,這個時候得到事件類型 click 和對應(yīng)的事件處理程序 fn，然后直行后面3步

a. 執(zhí)行事件注冊

b. 將react dom ，事件類型，處理函數(shù) fn 放入數(shù)組存儲

c. 組件掛載完成后，處理 b 步驟生成的數(shù)組，經(jīng)過遍歷把事件處理函數(shù)存儲到listenerBank中

再配個圖

3.具體執(zhí)行過程

3.1 得先從 jsx 說起

看個最熟悉的代碼，也是我們?nèi)粘５膶懛?/p>

handleFatherClick=()=>{

    }

    handleChildClick=()=>{

    }

    render(){
        return 
                    
                        child 
                    
               
    }

經(jīng)過 babel 編譯后，可以看到最終調(diào)用的方法是react.createElement,而且聲明的事件類型和回調(diào)也是一個props。

react.createElement執(zhí)行的結(jié)果會返回一個所謂的虛擬 dom(react element 或者 react dom),看下圖

3. 2 開始處理props，拿到事件類型和回調(diào) fn

ReactDOMComponent在進(jìn)行組件加載(mountComponent)、更新(updateComponent)的時候，需要對props進(jìn)行處理(_updateDOMProperties):

可以看下 registrationNameModules 的內(nèi)容，就不細(xì)說了。

3.3 注冊事件和事件的存儲

【注冊事件】

接著上面的代碼執(zhí)行到了這個方法

          enqueuePutListener(this, propKey, nextProp, transaction);

在這個方法里會進(jìn)行事件的注冊以及事件的存儲，包括冒泡和捕獲的處理

根據(jù)當(dāng)前的組件實(shí)例獲取獲取到最高父級-也就是document，然后執(zhí)行方法 listenTo - 也是最關(guān)鍵的一個方法，進(jìn)行事件綁定處理

源碼文件:ReactBrowerEventEmitter.js

最后執(zhí)行EventListener.listen(冒泡)或者EventListener.capture（捕獲），

單看下冒泡的注冊，其實(shí)就是addEventListener的第三個參數(shù)是 false

也可以看到注冊事件的時候也對 ie 做了兼容。

上面沒有看到 dispatchEvent 的定義，下面可以看到傳入 dispatchEvent 方法的代碼。

到這里事件注冊就完事兒了。

【事件存儲】

下一步開始事件的存儲，在 react 里所有事件的觸發(fā)都是通過 dispatchEvent方法統(tǒng)一進(jìn)行派發(fā)的，而不是在注冊的時候直接注冊聲明的回調(diào)，來看下如何存儲的。

【事件存儲結(jié)論】

react 把所有的事件和事件類型以及react 組件進(jìn)行關(guān)聯(lián)，把這個關(guān)系保存在了一個 map里，也就是一個對象里（鍵值對），然后在事件觸發(fā)的時候去根據(jù)當(dāng)前的組件id和事件類型查找到對應(yīng)的事件。

再加個簡易圖

看源碼：

function enqueuePutListener(inst, registrationName, listener, transaction) {

  var containerInfo = inst._hostContainerInfo;
  var isDocumentFragment = containerInfo._node && containerInfo._node.nodeType === DOC_FRAGMENT_TYPE;
  var doc = isDocumentFragment ? containerInfo._node : containerInfo._ownerDocument;
  listenTo(registrationName, doc);//這個方法上面已說完


  //這里涉及到了事務(wù)，事物會在以后的章節(jié)再介紹，主要看事件注冊
  //下面的代碼是將putListener放入數(shù)組，當(dāng)組件掛載完后會依次執(zhí)行數(shù)組的回調(diào)。也就是putListener會依次執(zhí)行
  transaction.getReactMountReady().enqueue(putListener, {
    inst: inst,//組件實(shí)例
    registrationName: registrationName,//事件類型 click
    listener: listener //事件回調(diào) fn
  });
}

function putListener() {
  var listenerToPut = this;
  //放入數(shù)組，回調(diào)隊(duì)列
  EventPluginHub.putListener(listenerToPut.inst, listenerToPut.registrationName, listenerToPut.listener);
}

大致的流程就是執(zhí)行完listenTo（事件注冊），然后執(zhí)行 putListener 方法進(jìn)行事件存儲，所有的事件都會存儲到一個對象中 - listenerBank，具體由EventPluginHub進(jìn)行管理。

 //拿到組件唯一標(biāo)識 id
    var getDictionaryKey = function getDictionaryKey(inst) {

      return "." + inst._rootNodeID;

    }

   putListener: function putListener(inst, registrationName, listener) {

    //得到組件 id
        var key = getDictionaryKey(inst);

        //得到listenerBank對象中指定事件類型的對象
        var bankForRegistrationName = listenerBank[registrationName] || (listenerBank[registrationName] = {});

        //存儲回調(diào) fn
        bankForRegistrationName[key] = listener;

        //....
  }

listenerBank其實(shí)就是一個二級 map，這樣的結(jié)構(gòu)更方便事件的查找。

這里的組件 id 就是組件的唯一標(biāo)識，然后和fn 進(jìn)行關(guān)聯(lián)，在觸發(fā)階段就可以找到相關(guān)的事件回調(diào)。

看下listenerBank結(jié)構(gòu):

看到這個結(jié)構(gòu)是不是很熟悉呢？就是我們平常使用的 object.

到這里大致的流程已經(jīng)說完，是不是感覺有點(diǎn)明白又不大明白。

沒關(guān)系，再來個詳細(xì)的圖，重新理解下

4.最后

本文主要是從整體流程上介紹了下 react 事件中事件的注冊過程，并沒有深入到源碼的細(xì)節(jié)，有興趣的小伙兒可以自查下源碼，也希望本文能夠帶給你一些啟發(fā)，若文章有表述不清或有問題的地方歡迎留言交流。

更多精彩內(nèi)容歡迎關(guān)注我的公眾號-前端張大胖

云服務(wù)器 GPU云服務(wù)器事件注冊機(jī)制事件機(jī)制事件冒泡機(jī)制 js事件監(jiān)聽怎么理解

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

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

發(fā)表評論

登陸后可評論

0條評論

chaosx110

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 436·2023-04-25 16:38
代碼統(tǒng)計(jì)---使用SourceCounter

閱讀 1571·2021-09-26 09:46
中國服裝行業(yè)要走服裝智能制造路線

閱讀 3413·2021-09-08 09:35
LESS CSS使用及語法入門

閱讀 2833·2019-08-30 12:54
一些常用的 CSS 技巧和知識點(diǎn)

閱讀 3303·2019-08-29 17:06
jQuery 圖片查看插件 Magnify 開發(fā)簡介（仿 Windows 照片查看器）

閱讀 1106·2019-08-29 14:06
移動端

閱讀 3400·2019-08-29 13:00
每周前端開源推薦第四期

閱讀 3524·2019-08-28 17:53

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

結(jié)合源碼徹底理解 react事件機(jī)制原理 03 - 事件注冊

相關(guān)文章

結(jié)合源碼徹底理解 react事件機(jī)制原理 02 - 對于合成的理解

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

前端小冊 - 結(jié)合源碼徹底理解 react 事件機(jī)制

結(jié)合源碼徹底理解 react事件機(jī)制原理 04 - 事件執(zhí)行

重磅：前端 MVVM 與 FRP 的升階實(shí)踐 —— ReRest 可視化編程

發(fā)表評論

0條評論

chaosx110

男|高級講師

TA的文章

tensorflow

代碼統(tǒng)計(jì)---使用SourceCounter

中國服裝行業(yè)要走服裝智能制造路線

LESS CSS使用及語法入門

一些常用的 CSS 技巧和知識點(diǎn)

jQuery 圖片查看插件 Magnify 開發(fā)簡介（仿 Windows 照片查看器）

移動端

每周前端開源推薦第四期

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

結(jié)合源碼徹底理解 react事件機(jī)制原理 03 - 事件注冊

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！