結合源碼徹底理解 react事件機制原理 01 - 對事件機制的初步理解和驗證

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

摘要：前言這是事件機制的第一篇，主要內(nèi)容有表象理解，驗證，意義和思考。因為合成事件的觸發(fā)是基于瀏覽器的事件機制來實現(xiàn)的，通過冒泡機制冒泡到最頂層元素，然后再由統(tǒng)一去處理。合成事件的阻止冒泡不會影響原生事件。

前言

這是 react 事件機制的第一篇，主要內(nèi)容有：表象理解，驗證，意義和思考。

表象理解

先回顧下對react 事件機制基本理解，react 自身實現(xiàn)了一套自己的事件機制，包括事件注冊、事件的合成、事件冒泡、事件派發(fā)等，雖然和原生的是兩碼事，但也是基于瀏覽器的事件機制下完成的。

我們都知道react 的所有事件并沒有綁定到具體的 dom節(jié)點上而是綁定在了document 上，然后由統(tǒng)一的事件處理程序來處理，同時也是基于瀏覽器的事件機制（冒泡），所有節(jié)點的事件都會在 document 上觸發(fā)。

上面是基于對 react 事件的一個基本的認知，那這個認知是否正確呢？我們可以通過簡單的方法進行驗證。

驗證

驗證內(nèi)容：

所有事件均注冊到了元素的最頂層-document 上

節(jié)點的事件由統(tǒng)一的入口處理

為了方便，直接通過 cli 創(chuàng)建一個項目。

代碼如下：

componentDidMount(){ 

        document.getElementById("btn-reactandnative").addEventListener("click", (e) => {
            console.log("原生+react 事件:   原生事件執(zhí)行");
        });

    }

    handleNativeAndReact = (e) => {
        console.log("原生+react 事件:  當前執(zhí)行react事件");
    }

    handleClick=(e)=>{
        console.log("button click");
    }
 render(){
        return react event!!!react 事件

                
        
    }

代碼中給兩個 button綁定了合成事件，多帶帶給btn#btn-reactandnative綁定了一個原生的事件。

然后看下chrome 的控制臺，查看元素上的注冊事件。

經(jīng)過簡單的驗證，可以看到所有的事件根據(jù)不同的事件類型都綁定在了 document 上。觸發(fā)函數(shù)統(tǒng)一是 dispatchEvent。

試想一下

如果一個節(jié)點上同時綁定了合成和原生事件，那么禁止冒泡后執(zhí)行關系是怎樣的呢？

其實讀到這里答案已經(jīng)有了。我們現(xiàn)在基于目前的知識去分析下這個關系。

因為合成事件的觸發(fā)是基于瀏覽器的事件機制來實現(xiàn)的，通過冒泡機制冒泡到最頂層元素，然后再由dispatchEvent統(tǒng)一去處理。

下面是我得出的結論：

原生事件阻止冒泡肯定會阻止合成事件的觸發(fā)。

合成事件的阻止冒泡不會影響原生事件。

為什么呢？先回憶下瀏覽器事件機制

瀏覽器事件的執(zhí)行需要經(jīng)過三個階段，捕獲階段-目標元素階段-冒泡階段。

節(jié)點上的原生事件的執(zhí)行是在目標階段，然而合成事件的執(zhí)行是在冒泡階段，所以原生事件會先合成事件執(zhí)行，然后再往父節(jié)點冒泡。

既然原生都阻止冒泡了，那合成還執(zhí)行個啥嘞。

好，輪到合成的被阻止冒泡了，那原生會執(zhí)行嗎？

當然會了。

因為原生的事件先于合成的執(zhí)行，所以合成事件內(nèi)阻止的只是合成的事件冒泡。（代碼我就不貼了）

所以得出結論：

原生事件（阻止冒泡）會阻止合成事件的執(zhí)行

合成事件（阻止冒泡）不會阻止原生事件的執(zhí)行

兩者最好不要混合使用，避免出現(xiàn)一些奇怪的問題

意義

react 自己做這么多的意義是什么？

我的理解的是

1.減少內(nèi)存消耗，提升性能，不需要注冊那么多的事件了，一種事件類型只在 document 上注冊一次

2.統(tǒng)一規(guī)范，解決 ie 事件兼容問題，簡化事件邏輯

3.對開發(fā)者友好

思考

既然 react 幫我們做了這么多事兒，那他的背后的機制是什么樣的呢？

事件怎么注冊的，事件怎么觸發(fā)的，冒泡機制怎樣實現(xiàn)的呢？

請看后續(xù)文章.....

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

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

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

轉載請注明本文地址：http://systransis.cn/yun/104426.html

前端小冊 - 結合源碼徹底理解 react 事件機制

摘要：對事件機制的初步理解和驗證對于合成的理解事件注冊機制事件執(zhí)行本文基于進行分析，雖然不是最新版本但是也不會影響我們對事件機制的整體把握和理解。最后希望通過本文可以讓你對事件機制有更清晰的認識和理解。 showImg(https://segmentfault.com/img/bVbtvI3?w=1048&h=550); 前言寫這個文章也算是實現(xiàn)19年的一個 flag，研究一個知識點并且把...

YJNldm 2019-08-23 17:57 評論0 收藏0
結合源碼徹底理解 react事件機制原理 02 - 對于合成的理解

摘要：前言這是事件機制系列文章的第二篇對于合成的理解，咱們就來說說合成這個名詞。在給注冊事件的時候也是對兼容性做了處理?？偨Y以上就是我對于合成這個名詞的理解，其實內(nèi)部還處理了很多，我只是略微簡單的舉了幾個栗子。 showImg(https://segmentfault.com/img/bVbtvI3?w=1048&h=550); 前言這是react事件機制系列文章的第二篇-對于合成的理解，...

nihao 2019-08-23 17:57 評論0 收藏0
結合源碼徹底理解 react事件機制原理 03 - 事件注冊

摘要：文章涉及到的源碼是基于版本，雖然不是最新版本但是也不會影響我們對事件機制的整體把握和理解。到這里事件注冊就完事兒了。 showImg(https://segmentfault.com/img/bVbtvI3?w=1048&h=550); 前言這是 react 事件機制的第三節(jié) - 事件注冊，通過本文你將了解react 事件的注冊過程，以及在這個過程中主要經(jīng)過了哪些關鍵步驟，同時結合源...

chaosx110 2019-08-23 17:57 評論0 收藏0
結合源碼徹底理解 react事件機制原理 04 - 事件執(zhí)行

摘要：文章涉及到的源碼是基于版本，雖然不是最新版本但是也不會影響我們對事件機制的整體把握和理解?？偨Y本文主要是從整體流程上介紹了下事件觸發(fā)的過程。 showImg(https://segmentfault.com/img/bVbtvI3?w=1048&h=550); 前言這是 react 事件機制的第四節(jié)-事件執(zhí)行，一起研究下在這個過程中主要經(jīng)過了哪些關鍵步驟，本文也是react 事件機制...

marser 2019-08-23 17:57 評論0 收藏0
優(yōu)秀文章收藏（慢慢消化）持續(xù)更新~

摘要：整理收藏一些優(yōu)秀的文章及大佬博客留著慢慢學習原文協(xié)作規(guī)范中文技術文檔協(xié)作規(guī)范阮一峰編程風格凹凸實驗室前端代碼規(guī)范風格指南這一次，徹底弄懂執(zhí)行機制一次弄懂徹底解決此類面試問題瀏覽器與的事件循環(huán)有何區(qū)別筆試題事件循環(huán)機制異步編程理解的異步 better-learning 整理收藏一些優(yōu)秀的文章及大佬博客留著慢慢學習原文:https://www.ahwgs.cn/youxiuwenzhan...

JeOam 2019-08-23 18:24 評論0 收藏0